@textbus/platform-browser 3.5.0 → 4.0.0-alpha.1

package/bundles/index.esm.js

@@ -1,6 +1,6 @@
 import 'reflect-metadata';
-import { InjectionToken, Injectable, Inject, Injector, Optional } from '@tanbo/di';
-import { VTextNode, VElement, Controller, Selection, RootComponentRef, Renderer, Scheduler, Slot, ContentType, Event, invokeListener, Keyboard, Commander, makeError, Starter, NativeRenderer, NativeSelectionBridge, OutputRenderer, History, Registry } from '@textbus/core';
+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 { Subject, filter, fromEvent, Subscription, distinctUntilChanged, merge, map, Observable } from '@tanbo/stream';
 
 function createElement(tagName, options = {}) {
@@ -118,6 +118,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 function __decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -134,15 +136,10 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 /**
  * 编辑器可选项依赖注入 token
@@ -161,34 +158,313 @@ const VIEW_DOCUMENT = new InjectionToken('VIEW_DOCUMENT');
  */
 const VIEW_MASK = new InjectionToken('VIEW_MASK');
 
+var Parser_1;
+/**
+ * 用于解析 HTML，并把 HTML 内容转换为 Textbus 可以支持的组件或插槽数据
+ */
+let Parser = Parser_1 = class Parser {
+    static parseHTML(html) {
+        return new DOMParser().parseFromString(html, 'text/html').body;
+    }
+    constructor(options, injector) {
+        this.options = options;
+        this.injector = injector;
+        const componentLoaders = [
+            ...(options.componentLoaders || [])
+        ];
+        const formatLoaders = [
+            ...(options.formatLoaders || [])
+        ];
+        const attributeLoaders = [
+            ...(options.attributeLoaders || [])
+        ];
+        // options.imports?.forEach(i => {
+        //   componentLoaders.push(...(i.componentLoaders || []))
+        //   formatLoaders.push(...(i.formatLoaders || []))
+        // })
+        this.componentLoaders = componentLoaders;
+        this.formatLoaders = formatLoaders;
+        this.attributeLoaders = attributeLoaders;
+    }
+    /**
+     * 使用指定的组件加载器解析一段 HTML 字符串
+     * @param html
+     * @param rootComponentLoader
+     */
+    parseDoc(html, rootComponentLoader) {
+        const element = Parser_1.parseHTML(html);
+        return rootComponentLoader.read(element, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
+            return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
+        });
+    }
+    /**
+     * 将一段 HTML 解析到指定插槽
+     * @param html
+     * @param rootSlot
+     */
+    parse(html, rootSlot) {
+        const element = Parser_1.parseHTML(html);
+        return this.readFormats(element, rootSlot);
+    }
+    readComponent(el, slot) {
+        if (el.nodeType === Node.ELEMENT_NODE) {
+            if (el.tagName === 'BR') {
+                slot.insert('\n');
+                return;
+            }
+            for (const t of this.componentLoaders) {
+                if (t.match(el)) {
+                    const result = t.read(el, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
+                        return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
+                    });
+                    if (!result) {
+                        return;
+                    }
+                    if (result instanceof Slot) {
+                        result.toDelta().forEach(i => slot.insert(i.insert, i.formats));
+                        return;
+                    }
+                    slot.insert(result);
+                    return;
+                }
+            }
+            this.readFormats(el, slot);
+        }
+        else if (el.nodeType === Node.TEXT_NODE) {
+            this.readText(slot, el);
+        }
+    }
+    readText(slot, el) {
+        const textContent = el.textContent;
+        if (/^\s*[\r\n\u200b]+\s*$/.test(textContent)) {
+            return;
+        }
+        slot.insert(textContent);
+    }
+    readFormats(el, slot) {
+        const formats = this.formatLoaders.filter(f => {
+            return f.match(el);
+        }).map(f => {
+            return f.read(el);
+        });
+        const startIndex = slot.index;
+        let startNode = el.firstChild;
+        while (startNode) {
+            this.readComponent(startNode, slot);
+            startNode = startNode.nextSibling;
+        }
+        const endIndex = slot.index;
+        this.applyFormats(slot, formats.map(i => {
+            return {
+                formatter: i.formatter,
+                value: i.value,
+                startIndex,
+                endIndex
+            };
+        }));
+        slot.retain(endIndex);
+        return slot;
+    }
+    readSlot(childSlot, slotRootElement, slotContentElement) {
+        if (slotRootElement.nodeType === Node.ELEMENT_NODE) {
+            this.attributeLoaders.filter(a => {
+                return a.match(slotRootElement);
+            }).forEach(a => {
+                const r = a.read(slotRootElement);
+                childSlot.setAttribute(r.attribute, r.value);
+            });
+        }
+        if (slotContentElement.nodeType === Node.ELEMENT_NODE) {
+            this.readFormats(slotContentElement, childSlot);
+        }
+        else {
+            this.readText(childSlot, slotContentElement);
+        }
+        return childSlot;
+    }
+    applyFormats(slot, formatItems) {
+        slot.background(() => {
+            formatItems.forEach(i => {
+                slot.retain(i.startIndex);
+                slot.retain(i.endIndex - i.startIndex, i.formatter, i.value);
+            });
+        });
+    }
+};
+Parser = Parser_1 = __decorate([
+    Injectable(),
+    __param(0, Inject(EDITOR_OPTIONS)),
+    __metadata("design:paramtypes", [Object, Injector])
+], Parser);
+
 class Input {
 }
 
+/**
+ * Textbus PC 端浏览器渲染能力桥接器抽象类，提供了 DOM 元素查询能力，具体渲染能力由各前端框架实现相应桥接
+ */
+class DomAdapter extends ViewAdapter {
+    constructor(mount) {
+        super();
+        this.mount = mount;
+        this.host = createElement('div', {
+            styles: {
+                cursor: 'text',
+                wordBreak: 'break-all',
+                boxSizing: 'border-box',
+                flex: 1,
+                outline: 'none'
+            },
+            attrs: {
+                'data-textbus-view': VIEW_DOCUMENT,
+            },
+            props: {
+                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);
+    }
+}
+
 /**
  * Textbus PC 端选区桥接实现
  */
 let SelectionBridge = class SelectionBridge {
-    constructor(config, injector, controller, selection, rootComponentRef, input, renderer) {
+    constructor(config, injector, controller, selection, rootComponentRef, input, domAdapter) {
         this.config = config;
-        this.injector = injector;
-        this.controller = controller;
         this.selection = selection;
         this.rootComponentRef = rootComponentRef;
         this.input = input;
-        this.renderer = renderer;
+        this.domAdapter = domAdapter;
         this.nativeSelection = document.getSelection();
-        this.selectionMaskElement = createElement('style');
         this.selectionChangeEvent = new Subject();
         this.subs = [];
         this.connector = null;
         this.ignoreSelectionChange = false;
         this.changeFromUser = false;
         this.docContainer = injector.get(VIEW_DOCUMENT);
-        this.maskContainer = injector.get(VIEW_MASK);
         this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(filter(() => {
             return !controller.readonly;
         }));
-        document.head.appendChild(this.selectionMaskElement);
         this.sub = this.onSelectionChange.subscribe((r) => {
             if (r) {
                 input.focus(r, this.changeFromUser);
@@ -484,22 +760,14 @@ let SelectionBridge = class SelectionBridge {
         const isFocusStart = selection.focusNode === nativeRange.startContainer && selection.focusOffset === nativeRange.startOffset;
         if (!this.docContainer.contains(selection.focusNode)) {
             if (isFocusEnd) {
-                const vEle = this.renderer.getVNodeBySlot(this.rootComponentRef.component.slots.first);
-                if (!vEle) {
-                    return;
-                }
-                const nativeNode = this.renderer.getNativeNodeByVNode(vEle);
+                const nativeNode = this.domAdapter.getNativeNodeBySlot(this.rootComponentRef.component.slots.first);
                 if (!nativeNode) {
                     return;
                 }
                 nativeRange.setEndAfter(nativeNode.lastChild);
             }
             else {
-                const vEle = this.renderer.getVNodeBySlot(this.rootComponentRef.component.slots.last);
-                if (!vEle) {
-                    return;
-                }
-                const nativeNode = this.renderer.getNativeNodeByVNode(vEle);
+                const nativeNode = this.domAdapter.getNativeNodeBySlot(this.rootComponentRef.component.slots.last);
                 if (!nativeNode) {
                     return;
                 }
@@ -556,30 +824,28 @@ let SelectionBridge = class SelectionBridge {
     }
     findSelectedNodeAndOffset(slot, offset) {
         const prev = slot.getContentAtIndex(offset - 1);
-        const vNodes = this.renderer.getVNodesBySlot(slot);
+        const nodes = this.domAdapter.getNodesBySlot(slot);
         if (prev) {
             if (typeof prev !== 'string') {
-                const vNode = this.renderer.getVNodeByComponent(prev);
-                const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
+                const nativeNode = this.domAdapter.getNativeNodeByComponent(prev);
                 return {
                     node: nativeNode.parentNode,
                     offset: Array.from(nativeNode.parentNode.childNodes).indexOf(nativeNode) + 1
                 };
             }
             else if (prev === '\n') {
-                for (const vNode of vNodes) {
-                    if (vNode instanceof VTextNode) {
+                for (const node of nodes) {
+                    if (node instanceof Text) {
                         continue;
                     }
-                    if (vNode.tagName === 'br') {
-                        const position = this.renderer.getLocationByVNode(vNode);
+                    if (node.nodeName === 'BR') {
+                        const position = this.domAdapter.getLocationByNativeNode(node);
                         if (position) {
                             if (position.endIndex === offset) {
-                                const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
-                                const parentNode = nativeNode.parentNode;
+                                const parentNode = node.parentNode;
                                 return {
                                     node: parentNode,
-                                    offset: Array.from(parentNode.childNodes).indexOf(nativeNode) + 1
+                                    offset: Array.from(parentNode.childNodes).indexOf(node) + 1
                                 };
                             }
                         }
@@ -589,36 +855,33 @@ let SelectionBridge = class SelectionBridge {
         }
         const current = slot.getContentAtIndex(offset);
         if (current && typeof current !== 'string') {
-            const vNode = this.renderer.getVNodeByComponent(current);
-            const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
+            const nativeNode = this.domAdapter.getNativeNodeByComponent(current);
             return {
                 node: nativeNode.parentNode,
                 offset: Array.from(nativeNode.parentNode.childNodes).indexOf(nativeNode)
             };
         }
-        for (const vNode of vNodes) {
-            if (vNode instanceof VElement) {
-                if (vNode.tagName === 'br') {
-                    const position = this.renderer.getLocationByVNode(vNode);
+        for (const node of nodes) {
+            if (node instanceof Element) {
+                if (node.tagName === 'BR') {
+                    const position = this.domAdapter.getLocationByNativeNode(node);
                     if (position) {
                         if (position.startIndex === offset) {
-                            const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
-                            const parentNode = nativeNode.parentNode;
+                            const parentNode = node.parentNode;
                             return {
                                 node: parentNode,
-                                offset: Array.from(parentNode.childNodes).indexOf(nativeNode)
+                                offset: Array.from(parentNode.childNodes).indexOf(node)
                             };
                         }
                     }
                 }
                 continue;
             }
-            const position = this.renderer.getLocationByVNode(vNode);
+            const position = this.domAdapter.getLocationByNativeNode(node);
             if (position) {
                 if (offset >= position.startIndex && offset <= position.endIndex) {
-                    const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
                     return {
-                        node: nativeNode,
+                        node: node,
                         offset: offset - position.startIndex
                     };
                 }
@@ -629,10 +892,10 @@ let SelectionBridge = class SelectionBridge {
     getCorrectedPosition(node, offset, toAfter, excludeNodes = []) {
         excludeNodes.push(node);
         if (node.nodeType === Node.ELEMENT_NODE) {
-            const containerPosition = this.renderer.getLocationByNativeNode(node);
+            const containerPosition = this.domAdapter.getLocationByNativeNode(node);
             const childNode = node.childNodes[offset];
             if (childNode) {
-                const childPosition = this.renderer.getLocationByNativeNode(childNode);
+                const childPosition = this.domAdapter.getLocationByNativeNode(childNode);
                 if (childPosition) {
                     if (containerPosition) {
                         return {
@@ -646,7 +909,7 @@ let SelectionBridge = class SelectionBridge {
             }
             const prevNode = node.childNodes[offset - 1];
             if (prevNode) {
-                const prevPosition = this.renderer.getLocationByNativeNode(prevNode);
+                const prevPosition = this.domAdapter.getLocationByNativeNode(prevNode);
                 if (prevPosition && containerPosition) {
                     return {
                         slot: prevPosition.slot,
@@ -667,7 +930,7 @@ let SelectionBridge = class SelectionBridge {
             return this.findFocusNodeByParent(node, toAfter, excludeNodes);
         }
         else if (node.nodeType === Node.TEXT_NODE) {
-            const containerPosition = this.renderer.getLocationByNativeNode(node);
+            const containerPosition = this.domAdapter.getLocationByNativeNode(node);
             if (containerPosition) {
                 return {
                     slot: containerPosition.slot,
@@ -691,7 +954,7 @@ let SelectionBridge = class SelectionBridge {
             return this.findFocusNodeByParent(node, toAfter, excludeNodes);
         }
         excludeNodes.push(node);
-        const position = this.renderer.getLocationByNativeNode(node);
+        const position = this.domAdapter.getLocationByNativeNode(node);
         if (position) {
             return {
                 slot: position.slot,
@@ -711,7 +974,7 @@ let SelectionBridge = class SelectionBridge {
     findFocusNodeByParent(node, toAfter, excludeNodes) {
         const parentNode = node.parentNode;
         if (parentNode) {
-            const parentPosition = this.renderer.getLocationByNativeNode(parentNode);
+            const parentPosition = this.domAdapter.getLocationByNativeNode(parentNode);
             if (parentPosition) {
                 return {
                     slot: parentPosition.slot,
@@ -732,654 +995,40 @@ SelectionBridge = __decorate([
         Selection,
         RootComponentRef,
         Input,
-        Renderer])
+        DomAdapter])
 ], SelectionBridge);
 
-/**
- * 远程光标绘制范围计算代理类，可用于定制特定场景下的远程选区绘制，如表格有选区，不会遵守常见的文档流形式
- */
-class CollaborateSelectionAwarenessDelegate {
-}
-/**
- * 协作光标绘制类
- */
-let CollaborateCursor = class CollaborateCursor {
-    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
-        this.injector = injector;
-        this.nativeSelection = nativeSelection;
-        this.scheduler = scheduler;
-        this.selection = selection;
-        this.awarenessDelegate = awarenessDelegate;
-        this.host = createElement('div', {
-            styles: {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                zIndex: 1
-            }
-        });
-        this.canvasContainer = createElement('div', {
-            styles: {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                overflow: 'hidden'
-            }
-        });
-        this.canvas = createElement('canvas', {
-            styles: {
-                position: 'absolute',
-                opacity: 0.5,
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: document.documentElement.clientHeight + 'px',
-                pointerEvents: 'none',
-            }
-        });
-        this.context = this.canvas.getContext('2d');
-        this.tooltips = createElement('div', {
-            styles: {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                fontSize: '12px',
-                zIndex: 10
-            }
-        });
-        this.onRectsChange = new Subject();
-        this.subscription = new Subscription();
-        this.currentSelection = [];
-        this.container = injector.get(VIEW_CONTAINER);
-        this.canvasContainer.append(this.canvas);
-        this.host.append(this.canvasContainer, this.tooltips);
-        this.container.prepend(this.host);
-        this.subscription.add(this.onRectsChange.subscribe(rects => {
-            for (const rect of rects) {
-                this.context.fillStyle = rect.color;
-                this.context.beginPath();
-                this.context.rect(rect.left, rect.top, rect.width, rect.height);
-                this.context.fill();
-                this.context.closePath();
-            }
-        }), fromEvent(window, 'resize').subscribe(() => {
-            this.canvas.style.height = document.documentElement.clientHeight + 'px';
-            this.refresh();
-        }), this.scheduler.onDocChanged.subscribe(() => {
-            this.refresh();
-        }));
-    }
-    /**
-     * 刷新协作光标，由于 Textbus 只会绘制可视区域的光标，当可视区域发生变化时，需要重新绘制
-     */
-    refresh() {
-        this.draw(this.currentSelection);
-    }
-    destroy() {
-        this.subscription.unsubscribe();
-    }
-    /**
-     * 根据远程用户光标位置，绘制协作光标
-     * @param paths
-     */
-    draw(paths) {
-        this.currentSelection = paths;
-        const containerRect = this.container.getBoundingClientRect();
-        this.canvas.style.top = containerRect.top * -1 + 'px';
-        this.canvas.width = this.canvas.offsetWidth;
-        this.canvas.height = this.canvas.offsetHeight;
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        const users = [];
-        paths.filter(i => {
-            return i.paths.anchor.length && i.paths.focus.length;
-        }).forEach(item => {
-            const anchorPaths = [...item.paths.anchor];
-            const focusPaths = [...item.paths.focus];
-            const anchorOffset = anchorPaths.pop();
-            const anchorSlot = this.selection.findSlotByPaths(anchorPaths);
-            const focusOffset = focusPaths.pop();
-            const focusSlot = this.selection.findSlotByPaths(focusPaths);
-            if (!anchorSlot || !focusSlot) {
-                return;
-            }
-            const { focus, anchor } = this.nativeSelection.getPositionByRange({
-                focusOffset,
-                anchorOffset,
-                focusSlot,
-                anchorSlot
-            });
-            if (!focus || !anchor) {
-                return;
-            }
-            const nativeRange = document.createRange();
-            nativeRange.setStart(anchor.node, anchor.offset);
-            nativeRange.setEnd(focus.node, focus.offset);
-            if ((anchor.node !== focus.node || anchor.offset !== focus.offset) && nativeRange.collapsed) {
-                nativeRange.setStart(focus.node, focus.offset);
-                nativeRange.setEnd(anchor.node, anchor.offset);
-            }
-            let rects = false;
-            if (this.awarenessDelegate) {
-                rects = this.awarenessDelegate.getRects({
-                    focusOffset,
-                    anchorOffset,
-                    focusSlot,
-                    anchorSlot
-                }, nativeRange);
-            }
-            if (!rects) {
-                rects = nativeRange.getClientRects();
-            }
-            const selectionRects = [];
-            for (let i = rects.length - 1; i >= 0; i--) {
-                const rect = rects[i];
-                selectionRects.push({
-                    id: item.id,
-                    color: item.color,
-                    username: item.username,
-                    left: rect.left - containerRect.left,
-                    top: rect.top,
-                    width: rect.width,
-                    height: rect.height,
-                });
-            }
-            this.onRectsChange.next(selectionRects);
-            const cursorRange = nativeRange.cloneRange();
-            cursorRange.setStart(focus.node, focus.offset);
-            cursorRange.collapse(true);
-            const cursorRect = getLayoutRectByRange(cursorRange);
-            const rect = {
-                id: item.id,
-                username: item.username,
-                color: item.color,
-                left: cursorRect.left - containerRect.left,
-                top: cursorRect.top - containerRect.top,
-                width: 1,
-                height: cursorRect.height
-            };
-            if (rect.left < 0 || rect.top < 0 || rect.left > containerRect.width) {
-                return;
-            }
-            users.push(rect);
-        });
-        this.drawUserCursor(users);
-    }
-    drawUserCursor(rects) {
-        for (let i = 0; i < rects.length; i++) {
-            const rect = rects[i];
-            const { cursor, userTip, anchor } = this.getUserCursor(i);
-            Object.assign(cursor.style, {
-                left: rect.left + 'px',
-                top: rect.top + 'px',
-                width: rect.width + 'px',
-                height: rect.height + 'px',
-                background: rect.color,
-                display: 'block'
-            });
-            anchor.style.background = rect.color;
-            userTip.innerText = rect.username;
-            userTip.style.background = rect.color;
-        }
-        for (let i = rects.length; i < this.tooltips.children.length; i++) {
-            this.tooltips.removeChild(this.tooltips.children[i]);
-        }
-    }
-    getUserCursor(index) {
-        let child = this.tooltips.children[index];
-        if (child) {
-            const anchor = child.children[0];
-            return {
-                cursor: child,
-                anchor,
-                userTip: anchor.children[0]
-            };
-        }
-        const userTip = createElement('span', {
-            styles: {
-                position: 'absolute',
-                left: '50%',
-                transform: 'translateX(-50%)',
-                marginBottom: '2px',
-                bottom: '100%',
-                whiteSpace: 'nowrap',
-                color: '#fff',
-                boxShadow: '0 1px 2px rgba(0,0,0,.1)',
-                opacity: 0.8,
-                borderRadius: '3px',
-                padding: '3px 5px',
-                pointerEvents: 'none',
-            }
-        });
-        const anchor = createElement('span', {
-            styles: {
-                position: 'absolute',
-                top: '-2px',
-                left: '-2px',
-                width: '5px',
-                height: '5px',
-                borderRadius: '50%',
-                pointerEvents: 'auto',
-                pointer: 'cursor',
-            },
-            children: [userTip]
-        });
-        child = createElement('span', {
-            styles: {
-                position: 'absolute',
-            },
-            children: [
-                anchor
-            ]
-        });
-        this.tooltips.append(child);
-        return {
-            cursor: child,
-            anchor,
-            userTip
-        };
-    }
-};
-CollaborateCursor = __decorate([
-    Injectable(),
-    __param(4, Optional()),
-    __metadata("design:paramtypes", [Injector,
-        SelectionBridge,
-        Scheduler,
-        Selection,
-        CollaborateSelectionAwarenessDelegate])
-], CollaborateCursor);
-
-var DomRenderer_1;
-/**
- * Textbus PC 端浏览器渲染能力实现
- */
-let DomRenderer = DomRenderer_1 = class DomRenderer {
-    constructor() {
-        this.isSVG = new RegExp(`^(${[
-            // 'a',
-            'animate',
-            'animateMotion',
-            'animateTransform',
-            'circle',
-            'clipPath',
-            'defs',
-            'desc',
-            'ellipse',
-            'feBlend',
-            'feColorMatrix',
-            'feComponentTransfer',
-            'feComposite',
-            'feConvolveMatrix',
-            'feDiffuseLighting',
-            'feDisplacementMap',
-            'feDistantLight',
-            'feDropShadow',
-            'feFlood',
-            'feFuncA',
-            'feFuncB',
-            'feFuncG',
-            'feFuncR',
-            'feGaussianBlur',
-            'feImage',
-            'feMerge',
-            'feMergeNode',
-            'feMorphology',
-            'feOffset',
-            'fePointLight',
-            'feSpecularLighting',
-            'feSpotLight',
-            'feTile',
-            'feTurbulence',
-            'filter',
-            'foreignObject',
-            'g',
-            'image',
-            'line',
-            'linearGradient',
-            'marker',
-            'mask',
-            'metadata',
-            'mpath',
-            'path',
-            'pattern',
-            'polygon',
-            'polyline',
-            'radialGradient',
-            'rect',
-            // 'script',
-            'set',
-            'stop',
-            // 'style',
-            'svg',
-            'switch',
-            'symbol',
-            'text',
-            'textPath',
-            'title',
-            'tspan',
-            'use',
-            'view'
-        ].join('|')})$`, 'i');
-        this.xlinkNameSpace = 'http://www.w3.org/1999/xlink';
-        this.possibleXlinkNames = {
-            xlinkActuate: 'xlink:actuate',
-            xlinkactuate: 'xlink:actuate',
-            'xlink:actuate': 'xlink:actuate',
-            xlinkArcrole: 'xlink:arcrole',
-            xlinkarcrole: 'xlink:arcrole',
-            'xlink:arcrole': 'xlink:arcrole',
-            xlinkHref: 'xlink:href',
-            xlinkhref: 'xlink:href',
-            'xlink:href': 'xlink:href',
-            xlinkRole: 'xlink:role',
-            xlinkrole: 'xlink:role',
-            'xlink:role': 'xlink:role',
-            xlinkShow: 'xlink:show',
-            xlinkshow: 'xlink:show',
-            'xlink:show': 'xlink:show',
-            xlinkTitle: 'xlink:title',
-            xlinktitle: 'xlink:title',
-            'xlink:title': 'xlink:title',
-            xlinkType: 'xlink:type',
-            xlinktype: 'xlink:type',
-            'xlink:type': 'xlink:type'
-        };
-        this.booleanProps = {
-            input: ['disabled', 'readonly'],
-            select: ['disabled', 'readonly'],
-            option: ['disabled', 'selected'],
-            button: ['disabled'],
-            video: ['controls', 'autoplay', 'loop', 'muted'],
-            audio: ['controls', 'autoplay', 'loop', 'muted'],
-        };
-        this.valueProps = {
-            input: ['value'],
-            option: ['value'],
-            video: ['src'],
-            audio: ['src']
-        };
-    }
-    listen(node, type, callback) {
-        node.addEventListener(type, callback);
-    }
-    unListen(node, type, callback) {
-        node.removeEventListener(type, callback);
-    }
-    createTextNode(textContent) {
-        return document.createTextNode(DomRenderer_1.replaceEmpty(textContent));
-    }
-    createElement(name) {
-        if (this.isSVG.test(name)) {
-            return document.createElementNS('http://www.w3.org/2000/svg', name);
-        }
-        return document.createElement(name);
-    }
-    appendChild(parent, newChild) {
-        parent.appendChild(newChild);
-    }
-    remove(node) {
-        var _a;
-        (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-    }
-    insertBefore(newNode, ref) {
-        ref.parentNode.insertBefore(newNode, ref);
-    }
-    getChildByIndex(parent, index) {
-        return parent.childNodes[index] || null;
-    }
-    addClass(target, name) {
-        target.classList.add(name);
-    }
-    removeClass(target, name) {
-        target.classList.remove(name);
-    }
-    setStyle(target, key, value) {
-        target.style[key] = value !== null && value !== void 0 ? value : '';
-    }
-    syncTextContent(target, content) {
-        const c = DomRenderer_1.replaceEmpty(content);
-        if (target.textContent !== c) {
-            target.textContent = c;
-        }
-    }
-    removeStyle(target, key) {
-        target.style[key] = '';
-    }
-    setAttribute(target, key, value) {
-        if (this.possibleXlinkNames[key]) {
-            this.setXlinkAttribute(target, this.possibleXlinkNames[key], value);
-            return;
-        }
-        target.setAttribute(key, value);
-        const tag = target.tagName.toLowerCase();
-        const booleanTagNames = this.booleanProps[tag];
-        const valueTagNames = this.valueProps[tag];
-        if (booleanTagNames && booleanTagNames.includes(key)) {
-            target[key] = Boolean(value);
-        }
-        if (valueTagNames && valueTagNames.includes(key)) {
-            target[key] = value;
-        }
-    }
-    removeAttribute(target, key) {
-        if (this.possibleXlinkNames[key]) {
-            this.removeXlinkAttribute(target, this.possibleXlinkNames[key]);
-        }
-        target.removeAttribute(key);
-        const tag = target.tagName.toLowerCase();
-        const booleanTagNames = this.booleanProps[tag];
-        const valueTagNames = this.valueProps[tag];
-        if (booleanTagNames && booleanTagNames.includes(key)) {
-            target[key] = false;
-        }
-        if (valueTagNames && valueTagNames.includes(key)) {
-            target[key] = '';
-        }
-    }
-    setXlinkAttribute(target, key, value) {
-        target.setAttributeNS(this.xlinkNameSpace, key, value);
-    }
-    removeXlinkAttribute(target, key) {
-        target.removeAttributeNS(this.xlinkNameSpace, key);
-    }
-    replace(newChild, oldChild) {
-        oldChild.parentNode.replaceChild(newChild, oldChild);
-    }
-    copy() {
-        document.execCommand('copy');
-    }
-    static replaceEmpty(s) {
-        const empty = '\u00a0';
-        return s.replace(/\s\s+/g, str => {
-            return ' ' + Array.from({
-                length: str.length - 1
-            }).fill(empty).join('');
-        }).replace(/^\s|\s$/g, empty);
-    }
-};
-DomRenderer = DomRenderer_1 = __decorate([
-    Injectable()
-], DomRenderer);
-
-var Parser_1;
-/**
- * 用于解析 HTML，并把 HTML 内容转换为 Textbus 可以支持的组件或插槽数据
- */
-let Parser = Parser_1 = class Parser {
-    static parseHTML(html) {
-        return new DOMParser().parseFromString(html, 'text/html').body;
-    }
-    constructor(options, injector) {
-        var _a;
-        this.options = options;
-        this.injector = injector;
-        const componentLoaders = [
-            ...(options.componentLoaders || [])
-        ];
-        const formatLoaders = [
-            ...(options.formatLoaders || [])
-        ];
-        const attributeLoaders = [
-            ...(options.attributeLoaders || [])
-        ];
-        (_a = options.imports) === null || _a === void 0 ? void 0 : _a.forEach(i => {
-            componentLoaders.push(...(i.componentLoaders || []));
-            formatLoaders.push(...(i.formatLoaders || []));
-        });
-        this.componentLoaders = componentLoaders;
-        this.formatLoaders = formatLoaders;
-        this.attributeLoaders = attributeLoaders;
-    }
-    /**
-     * 使用指定的组件加载器解析一段 HTML 字符串
-     * @param html
-     * @param rootComponentLoader
-     */
-    parseDoc(html, rootComponentLoader) {
-        const element = Parser_1.parseHTML(html);
-        return rootComponentLoader.read(element, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
-            return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
-        });
-    }
-    /**
-     * 将一段 HTML 解析到指定插槽
-     * @param html
-     * @param rootSlot
-     */
-    parse(html, rootSlot) {
-        const element = Parser_1.parseHTML(html);
-        return this.readFormats(element, rootSlot);
-    }
-    readComponent(el, slot) {
-        if (el.nodeType === Node.ELEMENT_NODE) {
-            if (el.tagName === 'BR') {
-                slot.insert('\n');
-                return;
-            }
-            for (const t of this.componentLoaders) {
-                if (t.match(el)) {
-                    const result = t.read(el, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
-                        return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
-                    });
-                    if (!result) {
-                        return;
-                    }
-                    if (result instanceof Slot) {
-                        result.toDelta().forEach(i => slot.insert(i.insert, i.formats));
-                        return;
-                    }
-                    slot.insert(result);
-                    return;
-                }
-            }
-            this.readFormats(el, slot);
-        }
-        else if (el.nodeType === Node.TEXT_NODE) {
-            this.readText(slot, el);
-        }
-    }
-    readText(slot, el) {
-        const textContent = el.textContent;
-        if (/^\s*[\r\n\u200b]+\s*$/.test(textContent)) {
-            return;
-        }
-        slot.insert(textContent);
-    }
-    readFormats(el, slot) {
-        const formats = this.formatLoaders.filter(f => {
-            return f.match(el);
-        }).map(f => {
-            return f.read(el);
-        });
-        const startIndex = slot.index;
-        let startNode = el.firstChild;
-        while (startNode) {
-            this.readComponent(startNode, slot);
-            startNode = startNode.nextSibling;
-        }
-        const endIndex = slot.index;
-        this.applyFormats(slot, formats.map(i => {
-            return {
-                formatter: i.formatter,
-                value: i.value,
-                startIndex,
-                endIndex
-            };
-        }));
-        slot.retain(endIndex);
-        return slot;
-    }
-    readSlot(childSlot, slotRootElement, slotContentElement) {
-        if (slotRootElement.nodeType === Node.ELEMENT_NODE) {
-            this.attributeLoaders.filter(a => {
-                return a.match(slotRootElement);
-            }).forEach(a => {
-                const r = a.read(slotRootElement);
-                childSlot.setAttribute(r.attribute, r.value);
-            });
-        }
-        if (slotContentElement.nodeType === Node.ELEMENT_NODE) {
-            this.readFormats(slotContentElement, childSlot);
-        }
-        else {
-            this.readText(childSlot, slotContentElement);
-        }
-        return childSlot;
-    }
-    applyFormats(slot, formatItems) {
-        slot.background(() => {
-            formatItems.forEach(i => {
-                slot.retain(i.startIndex);
-                slot.retain(i.endIndex - i.startIndex, i.formatter, i.value);
-            });
-        });
-    }
-};
-Parser = Parser_1 = __decorate([
-    Injectable(),
-    __param(0, Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, Injector])
-], Parser);
-
-const iframeHTML = `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Textbus</title>
-  <style>
-    html {position: fixed; left:0; overflow: hidden}
-    html, body{height: 100%;width:100%}
-    body{margin:0; overflow: hidden}
-    textarea{width: 2000px;height: 100%;opacity: 0; padding: 0; outline: none; border: none; position: absolute; left:0; top:0;}
-  </style>
-</head>
-<body>
-</body>
-</html>
-`;
-class ExperimentalCaret {
-    get rect() {
-        return this.caret.getBoundingClientRect();
-    }
-    set display(v) {
-        this._display = v;
-        this.caret.style.visibility = v ? 'visible' : 'hidden';
-    }
-    get display() {
-        return this._display;
-    }
-    constructor(scheduler, editorMask) {
+const iframeHTML = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Textbus</title>
+  <style>
+    html {position: fixed; left:0; overflow: hidden}
+    html, body{height: 100%;width:100%}
+    body{margin:0; overflow: hidden}
+    textarea{width: 2000px;height: 100%;opacity: 0; padding: 0; outline: none; border: none; position: absolute; left:0; top:0;}
+  </style>
+</head>
+<body>
+</body>
+</html>
+`;
+class ExperimentalCaret {
+    get rect() {
+        return this.caret.getBoundingClientRect();
+    }
+    set display(v) {
+        this._display = v;
+        this.caret.style.visibility = v ? 'visible' : 'hidden';
+    }
+    get display() {
+        return this._display;
+    }
+    constructor(scheduler, editorMask) {
         this.scheduler = scheduler;
         this.editorMask = editorMask;
         this.compositionState = null;
@@ -1857,10 +1506,21 @@ let MagicInput = class MagicInput extends Input {
             textarea.value = '';
             return ev.data;
         }))).subscribe(text => {
-            var _a;
             this.composition = false;
             this.caret.compositionState = this.compositionState = null;
-            (_a = this.caret.compositionElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.caret.compositionElement);
+            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();
             if (text) {
                 this.commander.write(text);
             }
@@ -1874,32 +1534,293 @@ let MagicInput = class MagicInput extends Input {
             isCompositionEnd = false;
         }));
     }
-    createEditableFrame() {
-        return createElement('iframe', {
-            attrs: {
-                scrolling: 'no'
-            },
+    createEditableFrame() {
+        return createElement('iframe', {
+            attrs: {
+                scrolling: 'no'
+            },
+            styles: {
+                border: 'none',
+                width: '100%',
+                display: 'block',
+                height: '100%',
+                position: 'relative',
+                top: this.isWindows ? '3px' : '0'
+            }
+        });
+    }
+};
+MagicInput = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [Parser,
+        Keyboard,
+        Commander,
+        Selection,
+        Controller,
+        Scheduler,
+        Injector])
+], MagicInput);
+
+/**
+ * 远程光标绘制范围计算代理类，可用于定制特定场景下的远程选区绘制，如表格有选区，不会遵守常见的文档流形式
+ */
+class CollaborateSelectionAwarenessDelegate {
+}
+/**
+ * 协作光标绘制类
+ */
+let CollaborateCursor = class CollaborateCursor {
+    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
+        this.nativeSelection = nativeSelection;
+        this.scheduler = scheduler;
+        this.selection = selection;
+        this.awarenessDelegate = awarenessDelegate;
+        this.host = createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                zIndex: 1
+            }
+        });
+        this.canvasContainer = createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                overflow: 'hidden'
+            }
+        });
+        this.canvas = createElement('canvas', {
+            styles: {
+                position: 'absolute',
+                opacity: 0.5,
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: document.documentElement.clientHeight + 'px',
+                pointerEvents: 'none',
+            }
+        });
+        this.context = this.canvas.getContext('2d');
+        this.tooltips = createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                fontSize: '12px',
+                zIndex: 10
+            }
+        });
+        this.onRectsChange = new Subject();
+        this.subscription = new Subscription();
+        this.currentSelection = [];
+        this.container = injector.get(VIEW_CONTAINER);
+        this.canvasContainer.append(this.canvas);
+        this.host.append(this.canvasContainer, this.tooltips);
+        this.container.prepend(this.host);
+        this.subscription.add(this.onRectsChange.subscribe(rects => {
+            for (const rect of rects) {
+                this.context.fillStyle = rect.color;
+                this.context.beginPath();
+                this.context.rect(rect.left, rect.top, rect.width, rect.height);
+                this.context.fill();
+                this.context.closePath();
+            }
+        }), fromEvent(window, 'resize').subscribe(() => {
+            this.canvas.style.height = document.documentElement.clientHeight + 'px';
+            this.refresh();
+        }), this.scheduler.onDocChanged.subscribe(() => {
+            this.refresh();
+        }));
+    }
+    /**
+     * 刷新协作光标，由于 Textbus 只会绘制可视区域的光标，当可视区域发生变化时，需要重新绘制
+     */
+    refresh() {
+        this.draw(this.currentSelection);
+    }
+    destroy() {
+        this.subscription.unsubscribe();
+    }
+    /**
+     * 根据远程用户光标位置，绘制协作光标
+     * @param paths
+     */
+    draw(paths) {
+        this.currentSelection = paths;
+        const containerRect = this.container.getBoundingClientRect();
+        this.canvas.style.top = containerRect.top * -1 + 'px';
+        this.canvas.width = this.canvas.offsetWidth;
+        this.canvas.height = this.canvas.offsetHeight;
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        const users = [];
+        paths.filter(i => {
+            return i.paths.anchor.length && i.paths.focus.length;
+        }).forEach(item => {
+            const anchorPaths = [...item.paths.anchor];
+            const focusPaths = [...item.paths.focus];
+            const anchorOffset = anchorPaths.pop();
+            const anchorSlot = this.selection.findSlotByPaths(anchorPaths);
+            const focusOffset = focusPaths.pop();
+            const focusSlot = this.selection.findSlotByPaths(focusPaths);
+            if (!anchorSlot || !focusSlot) {
+                return;
+            }
+            const { focus, anchor } = this.nativeSelection.getPositionByRange({
+                focusOffset,
+                anchorOffset,
+                focusSlot,
+                anchorSlot
+            });
+            if (!focus || !anchor) {
+                return;
+            }
+            const nativeRange = document.createRange();
+            nativeRange.setStart(anchor.node, anchor.offset);
+            nativeRange.setEnd(focus.node, focus.offset);
+            if ((anchor.node !== focus.node || anchor.offset !== focus.offset) && nativeRange.collapsed) {
+                nativeRange.setStart(focus.node, focus.offset);
+                nativeRange.setEnd(anchor.node, anchor.offset);
+            }
+            let rects = false;
+            if (this.awarenessDelegate) {
+                rects = this.awarenessDelegate.getRects({
+                    focusOffset,
+                    anchorOffset,
+                    focusSlot,
+                    anchorSlot
+                }, nativeRange);
+            }
+            if (!rects) {
+                rects = nativeRange.getClientRects();
+            }
+            const selectionRects = [];
+            for (let i = rects.length - 1; i >= 0; i--) {
+                const rect = rects[i];
+                selectionRects.push({
+                    id: item.id,
+                    color: item.color,
+                    username: item.username,
+                    left: rect.left - containerRect.left,
+                    top: rect.top,
+                    width: rect.width,
+                    height: rect.height,
+                });
+            }
+            this.onRectsChange.next(selectionRects);
+            const cursorRange = nativeRange.cloneRange();
+            cursorRange.setStart(focus.node, focus.offset);
+            cursorRange.collapse(true);
+            const cursorRect = getLayoutRectByRange(cursorRange);
+            const rect = {
+                id: item.id,
+                username: item.username,
+                color: item.color,
+                left: cursorRect.left - containerRect.left,
+                top: cursorRect.top - containerRect.top,
+                width: 1,
+                height: cursorRect.height
+            };
+            if (rect.left < 0 || rect.top < 0 || rect.left > containerRect.width) {
+                return;
+            }
+            users.push(rect);
+        });
+        this.drawUserCursor(users);
+    }
+    drawUserCursor(rects) {
+        for (let i = 0; i < rects.length; i++) {
+            const rect = rects[i];
+            const { cursor, userTip, anchor } = this.getUserCursor(i);
+            Object.assign(cursor.style, {
+                left: rect.left + 'px',
+                top: rect.top + 'px',
+                width: rect.width + 'px',
+                height: rect.height + 'px',
+                background: rect.color,
+                display: 'block'
+            });
+            anchor.style.background = rect.color;
+            userTip.innerText = rect.username;
+            userTip.style.background = rect.color;
+        }
+        for (let i = rects.length; i < this.tooltips.children.length; i++) {
+            this.tooltips.removeChild(this.tooltips.children[i]);
+        }
+    }
+    getUserCursor(index) {
+        let child = this.tooltips.children[index];
+        if (child) {
+            const anchor = child.children[0];
+            return {
+                cursor: child,
+                anchor,
+                userTip: anchor.children[0]
+            };
+        }
+        const userTip = createElement('span', {
             styles: {
-                border: 'none',
-                width: '100%',
-                display: 'block',
-                height: '100%',
-                position: 'relative',
-                top: this.isWindows ? '3px' : '0'
+                position: 'absolute',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                marginBottom: '2px',
+                bottom: '100%',
+                whiteSpace: 'nowrap',
+                color: '#fff',
+                boxShadow: '0 1px 2px rgba(0,0,0,.1)',
+                opacity: 0.8,
+                borderRadius: '3px',
+                padding: '3px 5px',
+                pointerEvents: 'none',
             }
         });
+        const anchor = createElement('span', {
+            styles: {
+                position: 'absolute',
+                top: '-2px',
+                left: '-2px',
+                width: '5px',
+                height: '5px',
+                borderRadius: '50%',
+                pointerEvents: 'auto',
+                pointer: 'cursor',
+            },
+            children: [userTip]
+        });
+        child = createElement('span', {
+            styles: {
+                position: 'absolute',
+            },
+            children: [
+                anchor
+            ]
+        });
+        this.tooltips.append(child);
+        return {
+            cursor: child,
+            anchor,
+            userTip
+        };
     }
 };
-MagicInput = __decorate([
+CollaborateCursor = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [Parser,
-        Keyboard,
-        Commander,
-        Selection,
-        Controller,
+    __param(4, Optional()),
+    __metadata("design:paramtypes", [Injector,
+        SelectionBridge,
         Scheduler,
-        Injector])
-], MagicInput);
+        Selection,
+        CollaborateSelectionAwarenessDelegate])
+], CollaborateCursor);
 
 class NativeCaret {
     set nativeRange(range) {
@@ -2015,14 +1936,13 @@ let NativeInput = class NativeInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(injector, parser, scheduler, selection, keyboard, renderer, commander, controller) {
+    constructor(injector, parser, scheduler, selection, keyboard, domAdapter, commander, controller) {
         super();
-        this.injector = injector;
         this.parser = parser;
         this.scheduler = scheduler;
         this.selection = selection;
         this.keyboard = keyboard;
-        this.renderer = renderer;
+        this.domAdapter = domAdapter;
         this.commander = commander;
         this.controller = controller;
         this.caret = new NativeCaret(this.scheduler);
@@ -2250,7 +2170,7 @@ let NativeInput = class NativeInput extends Input {
                     if (!range) {
                         break;
                     }
-                    const location = this.renderer.getLocationByNativeNode(range.startContainer);
+                    const location = this.domAdapter.getLocationByNativeNode(range.startContainer);
                     const startSlot = this.selection.startSlot;
                     if (startSlot) {
                         this.selection.setBaseAndExtent(startSlot, location.startIndex + range.startOffset, startSlot, location.startIndex + range.endOffset);
@@ -2261,7 +2181,7 @@ let NativeInput = class NativeInput extends Input {
                 case 'insertReplacementText': {
                     this.composition = false;
                     const range = ev.getTargetRanges()[0];
-                    const location = this.renderer.getLocationByNativeNode(range.startContainer);
+                    const location = this.domAdapter.getLocationByNativeNode(range.startContainer);
                     const startSlot = this.selection.startSlot;
                     this.selection.setBaseAndExtent(startSlot, location.startIndex + range.startOffset, startSlot, location.startIndex + range.endOffset);
                     this.commander.delete();
@@ -2315,7 +2235,7 @@ let NativeInput = class NativeInput extends Input {
             }
             if (ev.inputType === 'insertReplacementText') {
                 const range = ev.getTargetRanges()[0];
-                const location = this.renderer.getLocationByNativeNode(range.startContainer);
+                const location = this.domAdapter.getLocationByNativeNode(range.startContainer);
                 const startSlot = this.selection.startSlot;
                 this.selection.setBaseAndExtent(startSlot, location.startIndex + range.startOffset, startSlot, location.startIndex + range.endOffset);
                 this.commander.delete();
@@ -2373,561 +2293,59 @@ NativeInput = __decorate([
         Scheduler,
         Selection,
         Keyboard,
-        Renderer,
+        DomAdapter,
         Commander,
         Controller])
 ], NativeInput);
 
-var OutputTranslator_1;
-/**
- * HTML 输出转换器，用于将虚拟 DOM 转换为 HTML 字符串
- */
-let OutputTranslator = OutputTranslator_1 = class OutputTranslator {
-    constructor() {
-        this.singleTagTest = new RegExp(`^(${OutputTranslator_1.singleTags.join('|')})$`, 'i');
-    }
-    /**
-     * 将虚拟 DOM 转换为 HTML 字符串的方法
-     * @param vDom 虚拟 DOM 节点
-     */
-    transform(vDom) {
-        return vDom.children.map(child => {
-            return this.vDomToHTMLString(child);
-        }).join('');
-    }
-    vDomToHTMLString(vDom) {
-        const xssFilter = OutputTranslator_1.simpleXSSFilter;
-        if (vDom instanceof VTextNode) {
-            return this.replaceEmpty(xssFilter.text(vDom.textContent), '&nbsp;');
-        }
-        const styles = Array.from(vDom.styles.keys()).filter(key => {
-            const v = vDom.styles.get(key);
-            return !(v === undefined || v === null || v === '');
-        }).map(key => {
-            const k = key.replace(/(?=[A-Z])/g, '-').toLowerCase();
-            return xssFilter.attrValue(`${k}:${vDom.styles.get(key)}`);
-        }).join(';');
-        const attrs = Array.from(vDom.attrs.keys()).filter(key => key !== 'ref' && vDom.attrs.get(key) !== false).map(k => {
-            const key = xssFilter.attrName(k);
-            const value = vDom.attrs.get(k);
-            return (value === true ? `${key}` : `${key}="${xssFilter.attrValue(`${value}`)}"`);
-        });
-        if (styles) {
-            attrs.push(`style="${styles}"`);
-        }
-        if (vDom.classes && vDom.classes.size) {
-            attrs.push(`class="${xssFilter.attrValue(Array.from(vDom.classes).join(' '))}"`);
-        }
-        let attrStr = attrs.join(' ');
-        attrStr = attrStr ? ' ' + attrStr : '';
-        if (this.singleTagTest.test(vDom.tagName)) {
-            return `<${vDom.tagName}${attrStr}>`;
-        }
-        const childHTML = vDom.children.map(child => {
-            return this.vDomToHTMLString(child);
-        }).join('');
-        return [
-            `<${vDom.tagName}${attrStr}>`,
-            childHTML,
-            `</${vDom.tagName}>`
-        ].join('');
-    }
-    replaceEmpty(s, target) {
-        return s.replace(/\s\s+/g, str => {
-            return ' ' + Array.from({
-                length: str.length - 1
-            }).fill(target).join('');
-        }).replace(/^\s|\s$/g, target);
-    }
-};
-OutputTranslator.singleTags = 'br,img,hr'.split(',');
-OutputTranslator.simpleXSSFilter = {
-    text(text) {
-        return text.replace(/[><&]/g, str => {
-            return {
-                '<': '&lt;',
-                '>': '&gt;',
-                '&': '&amp;'
-            }[str];
-        });
-    },
-    attrName(text) {
-        return text.replace(/[><"'&]/g, str => {
-            return {
-                '<': '&lt;',
-                '>': '&gt;',
-                '"': '&quot;',
-                '\'': '&#x27;',
-                '&': '&amp;'
-            }[str];
-        });
-    },
-    attrValue(text) {
-        return text.replace(/["']/g, str => {
-            return {
-                '"': '&quot;',
-                '\'': '&#x27;'
-            }[str];
-        });
-    }
-};
-OutputTranslator = OutputTranslator_1 = __decorate([
-    Injectable()
-], OutputTranslator);
-
-const editorError = makeError('CoreEditor');
-/**
- * Textbus PC 端编辑器
- */
-class Viewer extends Starter {
-    get readonly() {
-        return this.controller.readonly;
-    }
-    set readonly(b) {
-        this.controller.readonly = b;
-    }
-    isFocus() {
-        return this._isFocus;
-    }
-    constructor(rootComponent, rootComponentLoader, options = {}) {
-        const id = 'textbus-' + Number((Math.random() + '').substring(2)).toString(16);
-        const { doc, mask, wrapper } = Viewer.createLayout(id, options.minHeight);
-        const staticProviders = [{
+class BrowserModule {
+    constructor(host, config) {
+        this.host = host;
+        this.config = config;
+        const { mask, wrapper } = BrowserModule.createLayout();
+        wrapper.prepend(config.adapter.host);
+        if (config.minHeight) {
+            config.adapter.host.style.minHeight = config.minHeight;
+        }
+        this.providers = [{
                 provide: EDITOR_OPTIONS,
-                useValue: options
+                useValue: config
             }, {
                 provide: VIEW_CONTAINER,
                 useValue: wrapper
             }, {
                 provide: VIEW_DOCUMENT,
-                useValue: doc
+                useValue: config.adapter.host
             }, {
                 provide: VIEW_MASK,
                 useValue: mask
-            }, {
-                provide: NativeRenderer,
-                useExisting: DomRenderer
             }, {
                 provide: NativeSelectionBridge,
                 useExisting: SelectionBridge
             }, {
                 provide: Input,
-                useClass: options.useContentEditable ? NativeInput : MagicInput
+                useClass: config.useContentEditable ? NativeInput : MagicInput
             }, {
-                provide: Viewer,
-                useFactory: () => this
-            }];
-        super(Object.assign(Object.assign({}, options), { plugins: options.plugins || [], providers: [
-                ...(options.providers || []),
-                ...staticProviders,
-                DomRenderer,
-                Parser,
-                SelectionBridge,
-                OutputTranslator,
-                CollaborateCursor
-            ], setup: options.setup }));
-        this.rootComponent = rootComponent;
-        this.rootComponentLoader = rootComponentLoader;
-        this.options = options;
-        /** 编辑器是否已销毁 */
-        this.destroyed = false;
-        /** 编辑器是否已准备好 */
-        this.isReady = false;
-        this.changeEvent = new Subject();
-        this.subs = [];
-        this._isFocus = false;
-        this.resourceNodes = [];
-        this.focusEvent = new Subject();
-        this.blurEvent = new Subject();
-        this.saveEvent = new Subject();
-        this.styleSheet = '';
-        this.scripts = [];
-        this.links = [];
-        this.id = id;
-        this.workbench = wrapper;
-        this.onChange = this.changeEvent.asObservable();
-        this.onFocus = this.focusEvent.asObservable();
-        this.onBlur = this.blurEvent.asObservable();
-        this.onSave = this.saveEvent.asObservable();
-        this.controller = this.get(Controller);
-    }
-    /**
-     * 初始化编辑器
-     * @param host 编辑器容器
-     */
-    mount(host) {
-        const _super = Object.create(null, {
-            mount: { get: () => super.mount }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.destroyed) {
-                throw editorError('the editor instance is destroyed!');
-            }
-            if (this.destroyed) {
-                return this;
-            }
-            const parser = this.get(Parser);
-            const registry = this.get(Registry);
-            const doc = this.get(VIEW_DOCUMENT);
-            this.initDefaultShortcut();
-            let component;
-            const content = this.options.content;
-            if (content) {
-                if (typeof content === 'string') {
-                    component = parser.parseDoc(content, this.rootComponentLoader);
-                }
-                else {
-                    component = registry.createComponentByFactory(content, this.rootComponent);
-                }
-            }
-            else {
-                component = this.rootComponent.createInstance(this);
-            }
-            this.initDocStyleSheetsAndScripts(this.options);
-            host.appendChild(this.workbench);
-            yield _super.mount.call(this, doc, component);
-            const renderer = this.get(Renderer);
-            const input = this.get(Input);
-            this.subs.push(renderer.onViewUpdated.subscribe(() => {
-                this.changeEvent.next();
-            }), input.caret.onPositionChange.pipe(map(p => !!p), distinctUntilChanged()).subscribe(b => {
-                if (b) {
-                    this._isFocus = true;
-                    this.focusEvent.next();
-                }
-                else {
-                    this._isFocus = false;
-                    this.blurEvent.next();
-                }
-            }));
-            this.isReady = true;
-            if (this.options.autoFocus) {
-                input.onReady.then(() => {
-                    this.focus();
-                });
-            }
-            return this;
-        });
-    }
-    /**
-     * 获取焦点
-     */
-    focus() {
-        this.guardReady();
-        const selection = this.get(Selection);
-        const rootComponentRef = this.get(RootComponentRef);
-        if (selection.commonAncestorSlot) {
-            selection.restore();
-            return;
-        }
-        const location = selection.findFirstPosition(rootComponentRef.component.slots.get(0));
-        selection.setPosition(location.slot, location.offset);
-        selection.restore();
-    }
-    /**
-     * 取消编辑器焦点
-     */
-    blur() {
-        if (this.isReady) {
-            const selection = this.get(Selection);
-            selection.unSelect();
-            selection.restore();
-        }
-    }
-    /**
-     * 获取编辑器所有资源
-     */
-    getResources() {
-        var _a;
-        return {
-            styleSheets: ((_a = this.options) === null || _a === void 0 ? void 0 : _a.styleSheets) || [],
-            styleSheet: this.styleSheet,
-            links: this.links,
-            scripts: this.scripts
-        };
-    }
-    /**
-     * 获取 HTML 格式的内容
-     */
-    getHTML() {
-        this.guardReady();
-        const outputRenderer = this.get(OutputRenderer);
-        const outputTranslator = this.get(OutputTranslator);
-        const vDom = outputRenderer.render();
-        return outputTranslator.transform(vDom);
-    }
-    /**
-     * 获取 JSON 格式的内容
-     */
-    getJSON() {
-        this.guardReady();
-        const rootComponentRef = this.get(RootComponentRef);
-        return rootComponentRef.component.toJSON();
-    }
-    /**
-     * 清空内容
-     */
-    clear() {
-        this.replaceContent('');
-        const history = this.get(History);
-        history.clear();
-    }
-    /**
-     * 销毁编辑器
-     */
-    destroy() {
-        var _a;
-        if (this.destroyed) {
-            return;
-        }
-        this.destroyed = true;
-        this.subs.forEach(i => i.unsubscribe());
-        const types = [
-            Input
-        ];
-        types.forEach(i => {
-            this.get(i).destroy();
-        });
-        super.destroy();
-        (_a = this.workbench.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.workbench);
-        this.resourceNodes.forEach(node => {
-            var _a;
-            (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-        });
-    }
-    /**
-     * 替换编辑的内容
-     * @param content
-     */
-    replaceContent(content) {
-        this.guardReady();
-        const parser = this.get(Parser);
-        const registry = this.get(Registry);
-        const rootComponentRef = this.get(RootComponentRef);
-        const selection = this.get(Selection);
-        const rootComponentLoader = this.rootComponentLoader;
-        let component;
-        if (typeof content === 'string') {
-            component = parser.parseDoc(content, rootComponentLoader);
-        }
-        else {
-            component = registry.createComponentByFactory(content, this.rootComponent);
-        }
-        selection.unSelect();
-        rootComponentRef.component.slots.clean();
-        rootComponentRef.component.slots.push(...component.slots.toArray());
-        invokeListener(component, 'onDestroy');
-    }
-    guardReady() {
-        if (this.destroyed) {
-            throw editorError('the editor instance is destroyed!');
-        }
-        if (!this.isReady) {
-            throw editorError('please wait for the editor to initialize before getting the content!');
-        }
-    }
-    initDefaultShortcut() {
-        const selection = this.get(Selection);
-        const keyboard = this.get(Keyboard);
-        const history = this.get(History);
-        const commander = this.get(Commander);
-        keyboard.addShortcut({
-            keymap: {
-                key: 's',
-                ctrlKey: true
-            },
-            action: () => {
-                this.saveEvent.next();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'Enter'
-            },
-            action: () => {
-                commander.break();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'Enter',
-                shiftKey: true
-            },
-            action: () => {
-                const startOffset = selection.startOffset;
-                const startSlot = selection.startSlot;
-                const isToEnd = startOffset === startSlot.length || startSlot.isEmpty;
-                const content = isToEnd ? '\n\n' : '\n';
-                const isInserted = commander.insert(content);
-                if (isInserted && isToEnd) {
-                    selection.setPosition(startSlot, startOffset + 1);
-                }
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: ['Delete', 'Backspace']
-            },
-            action: (key) => {
-                commander.delete(key === 'Backspace');
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']
-            },
-            action: (key) => {
-                switch (key) {
-                    case 'ArrowLeft':
-                        selection.toPrevious();
-                        break;
-                    case 'ArrowRight':
-                        selection.toNext();
-                        break;
-                    case 'ArrowUp':
-                        selection.toPreviousLine();
-                        break;
-                    case 'ArrowDown':
-                        selection.toNextLine();
-                        break;
-                }
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'],
-                shiftKey: true
-            },
-            action: (key) => {
-                switch (key) {
-                    case 'ArrowLeft':
-                        selection.wrapToBefore();
-                        break;
-                    case 'ArrowRight':
-                        selection.wrapToAfter();
-                        break;
-                    case 'ArrowUp':
-                        selection.wrapToPreviousLine();
-                        break;
-                    case 'ArrowDown':
-                        selection.wrapToNextLine();
-                        break;
-                }
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'Tab'
-            },
-            action: () => {
-                commander.insert('    ');
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'a',
-                ctrlKey: true
-            },
-            action: () => {
-                selection.selectAll();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'c',
-                ctrlKey: true
-            },
-            action: () => {
-                commander.copy();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'x',
-                ctrlKey: true
-            },
-            action: () => {
-                commander.cut();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'z',
-                ctrlKey: true
-            },
-            action: () => {
-                history.back();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'z',
-                ctrlKey: true,
-                shiftKey: true
+                provide: ViewAdapter,
+                useFactory(v) {
+                    return v;
+                },
+                deps: [DomAdapter]
+            }, {
+                provide: DomAdapter,
+                useValue: config.adapter
             },
-            action: () => {
-                history.forward();
-            }
-        });
+            Parser,
+            SelectionBridge,
+            CollaborateCursor
+        ];
+        this.workbench = wrapper;
+        this.host.append(wrapper);
     }
-    initDocStyleSheetsAndScripts(options) {
-        var _a;
-        const loaders = [];
-        (_a = options.imports) === null || _a === void 0 ? void 0 : _a.forEach(module => {
-            loaders.push(...(module.componentLoaders || []));
-        });
-        loaders.push(...(options.componentLoaders || []));
-        const resources = loaders.filter(i => i.resources).map(i => i.resources);
-        const docStyles = [];
-        const editModeStyles = [];
-        resources.forEach(metadata => {
-            var _a, _b;
-            if (Array.isArray(metadata.links)) {
-                this.links.push(...metadata.links);
-            }
-            docStyles.push(((_a = metadata.styles) === null || _a === void 0 ? void 0 : _a.join('')) || '');
-            editModeStyles.push(((_b = metadata.editModeStyles) === null || _b === void 0 ? void 0 : _b.join('')) || '');
-        });
-        this.links.forEach(link => {
-            const linkEle = document.createElement('link');
-            Object.assign(linkEle, link);
-            this.resourceNodes.push(linkEle);
-            document.head.appendChild(linkEle);
-        });
-        const styleEl = document.createElement('style');
-        docStyles.push(...(options.styleSheets || []));
-        editModeStyles.push(`#${this.id} *::selection{background-color: rgba(18, 150, 219, .2); color:inherit}`, ...(options.editingStyleSheets || []));
-        this.styleSheet = Viewer.cssMin(docStyles.join(''));
-        styleEl.innerHTML = this.styleSheet + Viewer.cssMin(editModeStyles.join(''));
-        this.resourceNodes.push(styleEl);
-        document.head.append(styleEl);
-        resources.filter(i => { var _a; return (_a = i.scripts) === null || _a === void 0 ? void 0 : _a.length; }).map(i => i.scripts).flat().forEach(src => {
-            if (src) {
-                const script = document.createElement('script');
-                script.src = src;
-                this.scripts.push(src);
-                document.head.appendChild(script);
-                this.resourceNodes.push(script);
-            }
-        });
+    onDestroy() {
+        this.workbench.remove();
     }
-    static createLayout(id, minHeight = '100%') {
-        const doc = createElement('div', {
-            styles: {
-                cursor: 'text',
-                wordBreak: 'break-all',
-                boxSizing: 'border-box',
-                minHeight,
-                flex: 1,
-                outline: 'none'
-            },
-            attrs: {
-                'data-textbus-view': VIEW_DOCUMENT,
-            },
-            props: {
-                id
-            }
-        });
+    static createLayout() {
         const mask = createElement('div', {
             attrs: {
                 'data-textbus-view': VIEW_MASK,
@@ -2953,20 +2371,13 @@ class Viewer extends Starter {
                 position: 'relative',
                 flexDirection: 'column'
             },
-            children: [doc, mask]
+            children: [mask]
         });
         return {
             wrapper,
-            doc,
             mask
         };
     }
-    static cssMin(str) {
-        return str
-            .replace(/\s*(?=[>{}:;,[])/g, '')
-            .replace(/([>{}:;,])\s*/g, '$1')
-            .replace(/;}/g, '}').replace(/\s+/, ' ').trim();
-    }
 }
 
-export { CollaborateCursor, CollaborateSelectionAwarenessDelegate, DomRenderer, EDITOR_OPTIONS, Input, MagicInput, NativeInput, OutputTranslator, Parser, SelectionBridge, VIEW_CONTAINER, VIEW_DOCUMENT, VIEW_MASK, Viewer, createElement, createTextNode, getLayoutRectByRange, isFirefox, isMac, isMobileBrowser, isSafari, isWindows };
+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 };