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

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, VElement, VTextNode, ComponentInstance, 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,289 @@ 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 端浏览器渲染能力实现
+ */
+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 = new WeakMap();
+        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');
+    }
+    getNativeNodeByComponent(component) {
+        return this.componentRootElementCaches.get(component) || null;
+    }
+    getNativeNodeBySlot(slot) {
+        return this.slotRootNativeElementCaches.get(slot) || 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 +736,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 +800,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 +831,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 +868,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 +885,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 +906,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 +930,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 +950,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,660 +971,46 @@ 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;
+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.selection = selection;
-        this.awarenessDelegate = awarenessDelegate;
-        this.host = createElement('div', {
+        this.editorMask = editorMask;
+        this.compositionState = null;
+        this.compositionElement = createElement('span', {
             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) {
-        this.scheduler = scheduler;
-        this.editorMask = editorMask;
-        this.compositionState = null;
-        this.compositionElement = createElement('span', {
-            styles: {
-                textDecoration: 'underline'
+                textDecoration: 'underline'
             }
         });
         this.timer = null;
@@ -1857,10 +1482,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 +1510,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 +1912,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 +2146,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 +2157,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 +2211,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 +2269,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 +2347,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 };