@textbus/platform-browser 3.0.0-alpha.25 → 3.0.0-alpha.27

package/bundles/index.esm.js

@@ -1,7 +1,7 @@
 import 'reflect-metadata';
-import { InjectionToken, Injectable, Injector, Inject, Optional } from '@tanbo/di';
-import { Scheduler, Slot, jsx, ContentType, Keyboard, Commander, Selection, Controller, VTextNode, VElement, RootComponentRef, Renderer, History, makeError, Starter, OutputRenderer, Factory, invokeListener, NativeRenderer, NativeSelectionBridge } from '@textbus/core';
-import { Subject, distinctUntilChanged, fromEvent, Subscription, filter, merge, map, Observable } from '@tanbo/stream';
+import { InjectionToken, Injectable, Inject, Injector, Optional } from '@tanbo/di';
+import { VTextNode, VElement, Controller, Selection, RootComponentRef, Renderer, Scheduler, Slot, ContentType, Keyboard, Commander, History, makeError, Starter, NativeRenderer, NativeSelectionBridge, OutputRenderer, Factory, invokeListener } from '@textbus/core';
+import { Subject, filter, fromEvent, Subscription, merge, map, Observable, distinctUntilChanged } from '@tanbo/stream';
 
 function createElement(tagName, options = {}) {
     const el = document.createElement(tagName);
@@ -35,6 +35,67 @@ function createElement(tagName, options = {}) {
 }
 function createTextNode(content) {
     return document.createTextNode(content);
+}
+function getLayoutRectByRange(range) {
+    let { startContainer, startOffset } = range;
+    if (startContainer.nodeType === Node.TEXT_NODE) {
+        if (startOffset > 0) {
+            return range.getBoundingClientRect();
+        }
+        const parentNode = startContainer.parentNode;
+        startOffset = Array.from(parentNode.childNodes).indexOf(startContainer);
+        startContainer = parentNode;
+    }
+    const beforeNode = startContainer.childNodes[startOffset - 1];
+    if (beforeNode) {
+        if (beforeNode.nodeType === Node.ELEMENT_NODE && beforeNode.nodeName.toLowerCase() !== 'br') {
+            const rect = beforeNode.getBoundingClientRect();
+            return {
+                left: rect.right,
+                top: rect.top,
+                width: rect.width,
+                height: rect.height
+            };
+        }
+        else if (beforeNode.nodeType === Node.TEXT_NODE) {
+            const range2 = document.createRange();
+            range2.setStart(beforeNode, beforeNode.textContent.length);
+            range2.setEnd(beforeNode, beforeNode.textContent.length);
+            return range2.getBoundingClientRect();
+        }
+    }
+    const offsetNode = startContainer.childNodes[startOffset];
+    let isInsertBefore = false;
+    if (!offsetNode) {
+        const lastChild = startContainer.lastChild;
+        if (lastChild && lastChild.nodeType === Node.ELEMENT_NODE) {
+            const rect = lastChild.getBoundingClientRect();
+            return {
+                left: rect.right,
+                top: rect.top,
+                width: rect.width,
+                height: rect.height
+            };
+        }
+    }
+    if (offsetNode) {
+        if (offsetNode.nodeType === Node.ELEMENT_NODE && offsetNode.nodeName.toLowerCase() !== 'br') {
+            return offsetNode.getBoundingClientRect();
+        }
+        isInsertBefore = true;
+    }
+    const span = startContainer.ownerDocument.createElement('span');
+    span.innerText = '\u200b';
+    span.style.display = 'inline-block';
+    if (isInsertBefore) {
+        startContainer.insertBefore(span, offsetNode);
+    }
+    else {
+        startContainer.appendChild(span);
+    }
+    const rect = span.getBoundingClientRect();
+    startContainer.removeChild(span);
+    return rect;
 }
 
 const isWindows = () => /win(dows|32|64)/i.test(navigator.userAgent);
@@ -98,1685 +159,1856 @@ const VIEW_DOCUMENT = new InjectionToken('VIEW_DOCUMENT');
  */
 const VIEW_MASK = new InjectionToken('VIEW_MASK');
 
-function getLayoutRectByRange(range) {
-    let { startContainer, startOffset } = range;
-    if (startContainer.nodeType === Node.TEXT_NODE) {
-        if (startOffset > 0) {
-            return range.getBoundingClientRect();
+class Input {
+}
+
+/**
+ * Textbus PC 端选区桥接实现
+ */
+let SelectionBridge = class SelectionBridge {
+    constructor(config, injector, controller, selection, rootComponentRef, input, renderer) {
+        this.config = config;
+        this.injector = injector;
+        this.controller = controller;
+        this.selection = selection;
+        this.rootComponentRef = rootComponentRef;
+        this.input = input;
+        this.renderer = renderer;
+        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);
+            }
+            else {
+                input.blur();
+            }
+        });
+        this.sub.add(fromEvent(document, 'focusin').subscribe(ev => {
+            let target = ev.target;
+            if (/^(input|textarea|select)$/i.test(target.nodeName)) {
+                if (target.tagName.toLowerCase() === 'input' && /^(range|date)$/.test(target.type)) {
+                    return;
+                }
+                this.ignoreSelectionChange = true;
+                return;
+            }
+            if (!config.useContentEditable) {
+                while (target) {
+                    if (target.contentEditable === 'true') {
+                        this.ignoreSelectionChange = true;
+                        return;
+                    }
+                    target = target.parentNode;
+                }
+            }
+        }));
+        this.sub.add(fromEvent(document, 'focusout').subscribe(() => {
+            this.ignoreSelectionChange = false;
+        }));
+    }
+    connect(connector) {
+        this.disConnect();
+        this.connector = connector;
+        this.syncSelection(connector);
+        this.listen(connector);
+    }
+    disConnect() {
+        this.connector = null;
+        this.unListen();
+    }
+    getRect(location) {
+        const { focus, anchor } = this.getPositionByRange({
+            focusOffset: location.offset,
+            anchorOffset: location.offset,
+            focusSlot: location.slot,
+            anchorSlot: location.slot
+        });
+        if (!focus || !anchor) {
+            return null;
         }
-        const parentNode = startContainer.parentNode;
-        startOffset = Array.from(parentNode.childNodes).indexOf(startContainer);
-        startContainer = parentNode;
+        const nativeRange = document.createRange();
+        nativeRange.setStart(focus.node, focus.offset);
+        nativeRange.collapse();
+        return getLayoutRectByRange(nativeRange);
     }
-    const beforeNode = startContainer.childNodes[startOffset - 1];
-    if (beforeNode) {
-        if (beforeNode.nodeType === Node.ELEMENT_NODE && beforeNode.nodeName.toLowerCase() !== 'br') {
-            const rect = beforeNode.getBoundingClientRect();
-            return {
-                left: rect.right,
-                top: rect.top,
-                width: rect.width,
-                height: rect.height
-            };
+    restore(abstractSelection, formLocal) {
+        this.changeFromUser = formLocal;
+        if (this.ignoreSelectionChange || !this.connector) {
+            return;
         }
-        else if (beforeNode.nodeType === Node.TEXT_NODE) {
-            const range2 = document.createRange();
-            range2.setStart(beforeNode, beforeNode.textContent.length);
-            range2.setEnd(beforeNode, beforeNode.textContent.length);
-            return range2.getBoundingClientRect();
+        this.unListen();
+        if (!abstractSelection) {
+            this.nativeSelection.removeAllRanges();
+            this.selectionChangeEvent.next(null);
+            this.listen(this.connector);
+            return;
+        }
+        const { focus, anchor } = this.getPositionByRange(abstractSelection);
+        if (!focus || !anchor) {
+            this.nativeSelection.removeAllRanges();
+            this.selectionChangeEvent.next(null);
+            this.listen(this.connector);
+            return;
+        }
+        this.nativeSelection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+        if (this.nativeSelection.rangeCount) {
+            const nativeRange = this.nativeSelection.getRangeAt(0);
+            this.selectionChangeEvent.next(nativeRange);
+        }
+        else {
+            this.selectionChangeEvent.next(null);
+        }
+        // hack start 浏览器会触发上面选区更改事件
+        const bind = () => {
+            if (this.connector) {
+                this.listen(this.connector);
+            }
+        };
+        if (typeof requestIdleCallback === 'function') {
+            requestIdleCallback(bind);
+        }
+        else {
+            setTimeout(bind, 30);
         }
+        // hack end
     }
-    const offsetNode = startContainer.childNodes[startOffset];
-    let isInsertBefore = false;
-    if (!offsetNode) {
-        const lastChild = startContainer.lastChild;
-        if (lastChild && lastChild.nodeType === Node.ELEMENT_NODE) {
-            const rect = lastChild.getBoundingClientRect();
+    destroy() {
+        this.sub.unsubscribe();
+    }
+    getPositionByRange(abstractSelection) {
+        let focus;
+        let anchor;
+        try {
+            focus = this.findSelectedNodeAndOffset(abstractSelection.focusSlot, abstractSelection.focusOffset);
+            anchor = focus;
+            if (abstractSelection.anchorSlot !== abstractSelection.focusSlot ||
+                abstractSelection.anchorOffset !== abstractSelection.focusOffset) {
+                anchor = this.findSelectedNodeAndOffset(abstractSelection.anchorSlot, abstractSelection.anchorOffset);
+            }
             return {
-                left: rect.right,
-                top: rect.top,
-                width: rect.width,
-                height: rect.height
+                focus,
+                anchor
             };
         }
-    }
-    if (offsetNode) {
-        if (offsetNode.nodeType === Node.ELEMENT_NODE && offsetNode.nodeName.toLowerCase() !== 'br') {
-            return offsetNode.getBoundingClientRect();
+        catch (e) {
+            return {
+                focus: null,
+                anchor: null
+            };
         }
-        isInsertBefore = true;
     }
-    const span = startContainer.ownerDocument.createElement('span');
-    span.innerText = '\u200b';
-    span.style.display = 'inline-block';
-    if (isInsertBefore) {
-        startContainer.insertBefore(span, offsetNode);
+    getPreviousLinePositionByCurrent(position) {
+        return this.getLinePosition(position, false);
     }
-    else {
-        startContainer.appendChild(span);
+    getNextLinePositionByCurrent(position) {
+        return this.getLinePosition(position, true);
     }
-    const rect = span.getBoundingClientRect();
-    startContainer.removeChild(span);
-    return rect;
-}
-let Caret = class Caret {
-    constructor(scheduler, injector) {
-        this.scheduler = scheduler;
-        this.injector = injector;
-        this.timer = null;
-        this.oldPosition = null;
-        this._display = true;
-        this.flashing = true;
-        this.subs = [];
-        this.positionChangeEvent = new Subject();
-        this.styleChangeEvent = new Subject();
-        this.oldRange = null;
-        this.isFixed = false;
-        this.editorMask = injector.get(VIEW_MASK);
-        this.onPositionChange = this.positionChangeEvent.pipe(distinctUntilChanged());
-        this.onStyleChange = this.styleChangeEvent.asObservable();
-        this.elementRef = createElement('div', {
-            styles: {
-                position: 'absolute',
-                width: '2px',
-                pointerEvents: 'none'
-            },
-            children: [
-                this.caret = createElement('span', {
-                    styles: {
-                        width: '100%',
-                        height: '100%',
-                        position: 'absolute',
-                        left: 0,
-                        top: 0
-                    }
-                })
-            ]
-        });
-        this.subs.push(fromEvent(document, 'mousedown').subscribe(() => {
-            this.flashing = false;
-        }), fromEvent(document, 'mouseup').subscribe(() => {
-            this.flashing = true;
-        }));
-        this.editorMask.appendChild(this.elementRef);
-    }
-    set display(v) {
-        this._display = v;
-        this.caret.style.visibility = v ? 'visible' : 'hidden';
-    }
-    get display() {
-        return this._display;
-    }
-    refresh(isFixedCaret = false) {
-        this.isFixed = isFixedCaret;
-        if (this.oldRange) {
-            this.show(this.oldRange, false);
-        }
-        this.isFixed = false;
-    }
-    show(range, restart) {
-        const oldRect = this.elementRef.getBoundingClientRect();
-        this.oldPosition = {
-            top: oldRect.top,
-            left: oldRect.left,
-            height: oldRect.height
-        };
-        this.oldRange = range;
-        if (restart || this.scheduler.lastChangesHasLocalUpdate) {
-            clearTimeout(this.timer);
-        }
-        this.updateCursorPosition(range);
-        if (range.collapsed) {
-            if (restart || this.scheduler.lastChangesHasLocalUpdate) {
-                this.display = true;
-                const toggleShowHide = () => {
-                    this.display = !this.display || !this.flashing;
-                    this.timer = setTimeout(toggleShowHide, 400);
-                };
-                clearTimeout(this.timer);
-                this.timer = setTimeout(toggleShowHide, 400);
-            }
+    getLinePosition(currentPosition, toNext) {
+        clearTimeout(this.cacheCaretPositionTimer);
+        let p;
+        if (this.oldCaretPosition) {
+            p = toNext ?
+                this.getNextLinePositionByOffset(currentPosition, this.oldCaretPosition.left) :
+                this.getPreviousLinePositionByOffset(currentPosition, this.oldCaretPosition.left);
         }
         else {
-            this.display = false;
-            clearTimeout(this.timer);
+            this.oldCaretPosition = this.getRect(currentPosition);
+            p = toNext ?
+                this.getNextLinePositionByOffset(currentPosition, this.oldCaretPosition.left) :
+                this.getPreviousLinePositionByOffset(currentPosition, this.oldCaretPosition.left);
         }
+        this.cacheCaretPositionTimer = setTimeout(() => {
+            this.oldCaretPosition = null;
+        }, 3000);
+        return p;
     }
-    hide() {
-        this.display = false;
-        clearTimeout(this.timer);
-        this.positionChangeEvent.next(null);
-    }
-    destroy() {
-        clearTimeout(this.timer);
-        this.subs.forEach(i => i.unsubscribe());
-    }
-    correctScrollTop(scroller) {
-        const scheduler = this.scheduler;
-        let docIsChanged = true;
-        function limitPosition(position) {
-            const { top, bottom } = scroller.getLimit();
-            const caretTop = position.top;
-            if (caretTop + position.height > bottom) {
-                const offset = caretTop - bottom + position.height;
-                scroller.setOffset(offset);
+    /**
+     * 获取选区向上移动一行的位置。
+     * @param currentPosition
+     * @param startLeft 参考位置。
+     */
+    getPreviousLinePositionByOffset(currentPosition, startLeft) {
+        let isToPrevLine = false;
+        let loopCount = 0;
+        let minLeft = startLeft;
+        let focusSlot = currentPosition.slot;
+        let focusOffset = currentPosition.offset;
+        let minTop = this.getRect({
+            slot: focusSlot,
+            offset: focusOffset
+        }).top;
+        let position;
+        let oldPosition;
+        let oldLeft = 0;
+        while (true) {
+            loopCount++;
+            position = this.selection.getPreviousPositionByPosition(focusSlot, focusOffset);
+            focusSlot = position.slot;
+            focusOffset = position.offset;
+            const rect2 = this.getRect(position);
+            if (!isToPrevLine) {
+                if (rect2.left > minLeft || rect2.top < minTop) {
+                    isToPrevLine = true;
+                }
+                else if (rect2.left === minLeft && rect2.top === minTop) {
+                    return position;
+                }
+                minLeft = rect2.left;
+                minTop = rect2.top;
             }
-            else if (position.top < top) {
-                scroller.setOffset(-(top - position.top));
+            if (isToPrevLine) {
+                if (rect2.left < startLeft) {
+                    return position;
+                }
+                if (oldPosition) {
+                    if (rect2.left >= oldLeft) {
+                        return oldPosition;
+                    }
+                }
+                oldLeft = rect2.left;
+                oldPosition = position;
+            }
+            if (loopCount > 10000) {
+                break;
             }
         }
-        let isPressed = false;
-        this.subs.push(scroller.onScroll.subscribe(() => {
-            if (this.oldPosition) {
-                const rect = this.elementRef.getBoundingClientRect();
-                this.oldPosition.top = rect.top;
-                this.oldPosition.left = rect.left;
-                this.oldPosition.height = rect.height;
+        return position || {
+            offset: 0,
+            slot: focusSlot
+        };
+    }
+    /**
+     * 获取选区向下移动一行的位置。
+     * @param currentPosition
+     * @param startLeft 参考位置。
+     */
+    getNextLinePositionByOffset(currentPosition, startLeft) {
+        let isToNextLine = false;
+        let loopCount = 0;
+        let maxRight = startLeft;
+        let focusSlot = currentPosition.slot;
+        let focusOffset = currentPosition.offset;
+        let minTop = this.getRect({
+            slot: focusSlot,
+            offset: focusOffset
+        }).top;
+        let oldPosition;
+        let oldLeft = 0;
+        while (true) {
+            loopCount++;
+            const position = this.selection.getNextPositionByPosition(focusSlot, focusOffset);
+            focusSlot = position.slot;
+            focusOffset = position.offset;
+            const rect2 = this.getRect(position);
+            if (!isToNextLine) {
+                if (rect2.left < maxRight || rect2.top > minTop) {
+                    isToNextLine = true;
+                }
+                else if (rect2.left === maxRight && rect2.top === minTop) {
+                    return position;
+                }
+                maxRight = rect2.left;
+                minTop = rect2.top;
+                oldPosition = position;
             }
-        }), fromEvent(document, 'mousedown', true).subscribe(() => {
-            isPressed = true;
-        }), fromEvent(document, 'mouseup', true).subscribe(() => {
-            isPressed = false;
-        }), scheduler.onDocChange.subscribe(() => {
-            docIsChanged = true;
-        }), this.onPositionChange.subscribe(position => {
-            if (position) {
-                if (docIsChanged) {
-                    if (scheduler.lastChangesHasLocalUpdate) {
-                        limitPosition(position);
-                    }
-                    else if (this.oldPosition) {
-                        const offset = Math.floor(position.top - this.oldPosition.top);
-                        scroller.setOffset(offset);
-                    }
+            if (isToNextLine) {
+                if (rect2.left > startLeft) {
+                    return oldPosition;
                 }
-                else if (!isPressed) {
-                    if (this.isFixed && this.oldPosition) {
-                        const offset = Math.floor(position.top - this.oldPosition.top);
-                        scroller.setOffset(offset);
-                    }
-                    else {
-                        limitPosition(position);
+                if (oldPosition) {
+                    if (rect2.left <= oldLeft) {
+                        return oldPosition;
                     }
                 }
+                oldPosition = position;
+                oldLeft = rect2.left;
             }
-            docIsChanged = false;
+            if (loopCount > 10000) {
+                break;
+            }
+        }
+        return oldPosition || {
+            offset: focusSlot.length,
+            slot: focusSlot
+        };
+    }
+    unListen() {
+        this.subs.forEach(i => i.unsubscribe());
+        this.subs = [];
+    }
+    listen(connector) {
+        if (!this.config.useContentEditable) {
+            const selection = this.nativeSelection;
+            this.subs.push(fromEvent(this.docContainer, 'mousedown').subscribe(ev => {
+                if (this.ignoreSelectionChange || ev.button === 2) {
+                    return;
+                }
+                if (!ev.shiftKey) {
+                    selection.removeAllRanges();
+                }
+            }));
+        }
+        this.subs.push(fromEvent(document, 'selectionchange').subscribe(() => {
+            this.syncSelection(connector);
         }));
     }
-    updateCursorPosition(nativeRange) {
-        const startContainer = nativeRange.startContainer;
-        const node = (startContainer.nodeType === Node.ELEMENT_NODE ? startContainer : startContainer.parentNode);
-        if ((node === null || node === void 0 ? void 0 : node.nodeType) !== Node.ELEMENT_NODE || !nativeRange.collapsed) {
-            this.positionChangeEvent.next(null);
+    syncSelection(connector) {
+        var _a;
+        const selection = this.nativeSelection;
+        this.changeFromUser = true;
+        if (this.ignoreSelectionChange ||
+            this.input.composition ||
+            selection.rangeCount === 0 ||
+            !this.docContainer.contains(selection.anchorNode)) {
             return;
         }
-        const rect = getLayoutRectByRange(nativeRange);
-        const { fontSize, lineHeight, color } = getComputedStyle(node);
-        let height;
-        if (isNaN(+lineHeight)) {
-            const f = parseFloat(lineHeight);
-            if (isNaN(f)) {
-                height = parseFloat(fontSize);
+        const rawRange = selection.getRangeAt(0);
+        const nativeRange = rawRange.cloneRange();
+        const isFocusEnd = selection.focusNode === nativeRange.endContainer && selection.focusOffset === nativeRange.endOffset;
+        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);
+                const nativeNode = this.renderer.getNativeNodeByVNode(vEle);
+                nativeRange.setEndAfter(nativeNode.lastChild);
             }
             else {
-                height = f;
+                const vEle = this.renderer.getVNodeBySlot(this.rootComponentRef.component.slots.last);
+                const nativeNode = this.renderer.getNativeNodeByVNode(vEle);
+                nativeRange.setStartBefore(nativeNode.firstChild);
             }
         }
-        else {
-            height = parseFloat(fontSize) * parseFloat(lineHeight);
-        }
-        const boxHeight = Math.floor(Math.max(height, rect.height));
-        // const boxHeight = Math.floor(height)
-        let rectTop = rect.top;
-        if (rect.height < height) {
-            rectTop -= (height - rect.height) / 2;
+        const startPosition = this.getCorrectedPosition(nativeRange.startContainer, nativeRange.startOffset, isFocusStart);
+        const endPosition = nativeRange.collapsed ?
+            startPosition :
+            this.getCorrectedPosition(nativeRange.endContainer, nativeRange.endOffset, isFocusEnd);
+        if ([Node.ELEMENT_NODE, Node.TEXT_NODE].includes((_a = nativeRange.commonAncestorContainer) === null || _a === void 0 ? void 0 : _a.nodeType) &&
+            startPosition && endPosition) {
+            const abstractSelection = isFocusEnd ? {
+                anchorSlot: startPosition.slot,
+                anchorOffset: startPosition.offset,
+                focusSlot: endPosition.slot,
+                focusOffset: endPosition.offset
+            } : {
+                focusSlot: startPosition.slot,
+                focusOffset: startPosition.offset,
+                anchorSlot: endPosition.slot,
+                anchorOffset: endPosition.offset
+            };
+            const { focus, anchor } = this.getPositionByRange(abstractSelection);
+            if (focus && anchor) {
+                let start = anchor;
+                let end = focus;
+                if (isFocusStart) {
+                    start = focus;
+                    end = anchor;
+                }
+                if (nativeRange.startContainer !== start.node || nativeRange.startOffset !== start.offset) {
+                    nativeRange.setStart(start.node, start.offset);
+                }
+                if (nativeRange.endContainer !== end.node || nativeRange.endOffset !== end.offset) {
+                    nativeRange.setEnd(end.node, end.offset);
+                }
+                connector.setSelection(abstractSelection);
+                if (selection.isCollapsed) {
+                    rawRange.setStart(start.node, start.offset);
+                    rawRange.setEnd(end.node, end.offset);
+                }
+                this.selectionChangeEvent.next(nativeRange);
+            }
+            else {
+                connector.setSelection(null);
+            }
+            return;
         }
-        rectTop = Math.floor(rectTop);
-        const containerRect = this.editorMask.getBoundingClientRect();
-        const top = Math.floor(rectTop - containerRect.top);
-        const left = Math.floor(rect.left - containerRect.left);
-        Object.assign(this.elementRef.style, {
-            left: left + 'px',
-            top: top + 'px',
-            height: boxHeight + 'px',
-            lineHeight: boxHeight + 'px',
-            fontSize
-        });
-        this.caret.style.backgroundColor = color;
-        this.styleChangeEvent.next({
-            height: boxHeight + 'px',
-            lineHeight: boxHeight + 'px',
-            fontSize
-        });
-        this.positionChangeEvent.next({
-            left,
-            top: rectTop,
-            height: boxHeight
-        });
-    }
-};
-Caret = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [Scheduler,
-        Injector])
-], Caret);
-
-var Parser_1;
-let Parser = Parser_1 = class Parser {
-    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;
-    }
-    static parseHTML(html) {
-        return new DOMParser().parseFromString(html, 'text/html').body;
-    }
-    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);
-        });
-    }
-    parse(html, rootSlot) {
-        const element = Parser_1.parseHTML(html);
-        const formatItems = this.readFormats(element, rootSlot, []);
-        this.applyFormats(rootSlot, formatItems);
-        return rootSlot;
+        connector.setSelection(null);
     }
-    readComponent(el, slot, formatItems) {
-        if (el.nodeType === Node.ELEMENT_NODE) {
-            if (el.tagName === 'BR') {
-                slot.insert('\n');
-                return;
+    findSelectedNodeAndOffset(slot, offset) {
+        const prev = slot.getContentAtIndex(offset - 1);
+        const vNodes = this.renderer.getVNodesBySlot(slot);
+        if (prev) {
+            if (typeof prev !== 'string') {
+                const vNode = this.renderer.getVNodeByComponent(prev);
+                const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
+                return {
+                    node: nativeNode.parentNode,
+                    offset: Array.from(nativeNode.parentNode.childNodes).indexOf(nativeNode) + 1
+                };
             }
-            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 instanceof Slot) {
-                        result.toDelta().forEach(i => slot.insert(i.insert, i.formats));
-                        return;
+            else if (prev === '\n') {
+                for (const vNode of vNodes) {
+                    if (vNode instanceof VTextNode) {
+                        continue;
+                    }
+                    if (vNode.tagName === 'br') {
+                        const position = this.renderer.getLocationByVNode(vNode);
+                        if (position) {
+                            if (position.endIndex === offset) {
+                                const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
+                                const parentNode = nativeNode.parentNode;
+                                return {
+                                    node: parentNode,
+                                    offset: Array.from(parentNode.childNodes).indexOf(nativeNode) + 1
+                                };
+                            }
+                        }
                     }
-                    slot.insert(result);
-                    return;
                 }
             }
-            this.readFormats(el, slot, formatItems);
-        }
-        else if (el.nodeType === Node.TEXT_NODE) {
-            const textContent = el.textContent;
-            if (/^\s*[\r\n]+\s*$/.test(textContent)) {
-                return;
-            }
-            slot.insert(textContent);
         }
-    }
-    readFormats(el, slot, formatItems) {
-        const formats = this.formatLoaders.filter(f => {
-            return f.match(el);
-        }).map(f => {
-            return f.read(el);
-        });
-        const startIndex = slot.index;
-        Array.from(el.childNodes).forEach(child => {
-            this.readComponent(child, slot, formatItems);
-        });
-        const endIndex = slot.index;
-        formatItems.unshift(...formats.map(i => {
+        const current = slot.getContentAtIndex(offset);
+        if (current && typeof current !== 'string') {
+            const vNode = this.renderer.getVNodeByComponent(current);
+            const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
             return {
-                formatter: i.formatter,
-                value: i.value,
-                startIndex,
-                endIndex
+                node: nativeNode.parentNode,
+                offset: Array.from(nativeNode.parentNode.childNodes).indexOf(nativeNode)
             };
-        }));
-        return formatItems;
-    }
-    readSlot(childSlot, slotRootElement, slotContentElement) {
-        this.attributeLoaders.filter(a => {
-            return a.match(slotRootElement);
-        }).forEach(a => {
-            const r = a.read(slotRootElement);
-            childSlot.setAttribute(r.attribute, r.value);
-        });
-        const childFormatItems = this.readFormats(slotContentElement, childSlot, []);
-        this.applyFormats(childSlot, childFormatItems);
-        return childSlot;
-    }
-    applyFormats(slot, formatItems) {
-        formatItems.forEach(i => {
-            slot.retain(i.startIndex);
-            slot.retain(i.endIndex - i.startIndex, i.formatter, i.value);
-        });
+        }
+        for (const vNode of vNodes) {
+            if (vNode instanceof VElement) {
+                if (vNode.tagName === 'br') {
+                    const position = this.renderer.getLocationByVNode(vNode);
+                    if (position) {
+                        if (position.startIndex === offset) {
+                            const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
+                            const parentNode = nativeNode.parentNode;
+                            return {
+                                node: parentNode,
+                                offset: Array.from(parentNode.childNodes).indexOf(nativeNode)
+                            };
+                        }
+                    }
+                }
+                continue;
+            }
+            const position = this.renderer.getLocationByVNode(vNode);
+            if (position) {
+                if (offset >= position.startIndex && offset <= position.endIndex) {
+                    const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
+                    return {
+                        node: nativeNode,
+                        offset: offset - position.startIndex
+                    };
+                }
+            }
+        }
+        return null;
     }
-};
-Parser = Parser_1 = __decorate([
-    Injectable(),
-    __param(0, Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, Injector])
-], Parser);
-
-var Input_1;
-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>
-`;
-/**
- * Textbus PC 端输入实现
- */
-let Input = Input_1 = class Input {
-    constructor(parser, keyboard, commander, selection, controller, scheduler, caret) {
-        this.parser = parser;
-        this.keyboard = keyboard;
-        this.commander = commander;
-        this.selection = selection;
-        this.controller = controller;
-        this.scheduler = scheduler;
-        this.caret = caret;
-        this.container = this.createEditableFrame();
-        this.subscription = new Subscription();
-        this.textarea = null;
-        this.isFocus = false;
-        this.inputFormatterId = '__TextbusInputFormatter__';
-        this.inputFormatter = {
-            name: this.inputFormatterId,
-            columned: false,
-            render: (children) => {
-                return jsx('span', {
-                    'data-writing-format': this.inputFormatterId,
-                    style: {
-                        textDecoration: 'underline'
-                    },
-                    children
-                });
-            }
-        };
-        this.nativeFocus = false;
-        this.isSafari = isSafari();
-        this.isMac = isMac();
-        this.isWindows = isWindows();
-        this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
-        this.onReady = new Promise(resolve => {
-            this.subscription.add(fromEvent(this.container, 'load').subscribe(() => {
-                const doc = this.container.contentDocument;
-                doc.open();
-                doc.write(iframeHTML);
-                doc.close();
-                this.doc = doc;
-                this.init();
-                resolve();
-            }), controller.onReadonlyStateChange.subscribe(() => {
-                if (controller.readonly) {
-                    this.blur();
-                }
-            }));
-        });
-        caret.elementRef.append(this.container);
-    }
-    focus() {
-        var _a;
-        if (this.controller.readonly) {
-            return;
-        }
-        if (!this.isFocus) {
-            (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.focus();
-            setTimeout(() => {
-                var _a, _b, _c;
-                if (!this.nativeFocus && this.isFocus) {
-                    this.subscription.unsubscribe();
-                    (_b = (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.textarea);
-                    this.subscription = new Subscription();
-                    this.init();
-                    (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
+    getCorrectedPosition(node, offset, toAfter, excludeNodes = []) {
+        excludeNodes.push(node);
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const containerPosition = this.renderer.getLocationByNativeNode(node);
+            const childNode = node.childNodes[offset];
+            if (childNode) {
+                const childPosition = this.renderer.getLocationByNativeNode(childNode);
+                if (childPosition) {
+                    if (containerPosition) {
+                        return {
+                            slot: childPosition.slot,
+                            offset: childPosition.startIndex
+                        };
+                    }
+                    return this.findFocusNode(childNode, toAfter, excludeNodes);
                 }
-            });
-        }
-        this.isFocus = true;
-    }
-    blur() {
-        var _a;
-        (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.blur();
-        this.isFocus = false;
-    }
-    destroy() {
-        this.subscription.unsubscribe();
-    }
-    init() {
-        const doc = this.doc;
-        const contentBody = doc.body;
-        const textarea = doc.createElement('textarea');
-        contentBody.appendChild(textarea);
-        this.textarea = textarea;
-        this.subscription.add(fromEvent(textarea, 'blur').subscribe(() => {
-            this.isFocus = false;
-            this.nativeFocus = false;
-            this.caret.hide();
-        }), fromEvent(textarea, 'focus').subscribe(() => {
-            this.nativeFocus = true;
-        }), this.caret.onStyleChange.subscribe(style => {
-            Object.assign(textarea.style, style);
-        }));
-        Input_1.openExperimentalCompositionInput ? this.experimentalCompositionInput(textarea) : this.handleInput(textarea);
-        this.handleShortcut(textarea);
-        this.handleDefaultActions(textarea);
-    }
-    handleDefaultActions(textarea) {
-        this.subscription.add(fromEvent(document, 'copy').subscribe(ev => {
-            const selection = this.selection;
-            if (!selection.isSelected) {
-                return;
+                return this.findFocusNode(childNode, toAfter, excludeNodes);
             }
-            if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
-                const content = selection.startSlot.getContentAtIndex(selection.startOffset);
-                if (typeof content === 'object') {
-                    const clipboardData = ev.clipboardData;
-                    const nativeSelection = document.getSelection();
-                    const range = nativeSelection.getRangeAt(0);
-                    const div = document.createElement('div');
-                    const fragment = range.cloneContents();
-                    div.append(fragment);
-                    clipboardData.setData('text/html', div.innerHTML);
-                    clipboardData.setData('text', div.innerText);
-                    ev.preventDefault();
+            const prevNode = node.childNodes[offset - 1];
+            if (prevNode) {
+                const prevPosition = this.renderer.getLocationByNativeNode(prevNode);
+                if (prevPosition && containerPosition) {
+                    return {
+                        slot: prevPosition.slot,
+                        offset: prevPosition.endIndex
+                    };
                 }
             }
-        }), fromEvent(textarea, 'paste').subscribe(ev => {
-            const text = ev.clipboardData.getData('Text');
-            const files = Array.from(ev.clipboardData.files);
-            if (files.length) {
-                Promise.all(files.filter(i => {
-                    return /image/i.test(i.type);
-                }).map(item => {
-                    const reader = new FileReader();
-                    return new Promise(resolve => {
-                        reader.onload = (event) => {
-                            resolve(event.target.result);
-                        };
-                        reader.readAsDataURL(item);
-                    });
-                })).then(urls => {
-                    const html = urls.map(i => {
-                        return `<img src=${i}>`;
-                    }).join('');
-                    this.handlePaste(html, text);
-                });
-                ev.preventDefault();
-                return;
-            }
-            const div = this.doc.createElement('div');
-            div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
-            div.contentEditable = 'true';
-            this.doc.body.appendChild(div);
-            div.focus();
-            setTimeout(() => {
-                const html = div.innerHTML;
-                this.handlePaste(html, text);
-                this.doc.body.removeChild(div);
-            });
-        }));
-    }
-    handlePaste(html, text) {
-        const slot = this.parser.parse(html, new Slot([
-            ContentType.BlockComponent,
-            ContentType.InlineComponent,
-            ContentType.Text
-        ]));
-        this.commander.paste(slot, text);
-    }
-    handleShortcut(textarea) {
-        let isWriting = false;
-        let isIgnore = false;
-        this.subscription.add(fromEvent(textarea, 'compositionstart').subscribe(() => {
-            isWriting = true;
-        }), fromEvent(textarea, 'compositionend').subscribe(() => {
-            isWriting = false;
-        }), fromEvent(textarea, 'beforeinput').subscribe(ev => {
-            if (this.isSafari) {
-                if (ev.inputType === 'insertFromComposition') {
-                    isIgnore = true;
-                }
+            if (containerPosition) {
+                return {
+                    slot: containerPosition.slot,
+                    offset: containerPosition.endIndex
+                };
             }
-        }), fromEvent(textarea, 'keydown').pipe(filter(() => {
-            if (this.isSafari && isIgnore) {
-                isIgnore = false;
-                return false;
+            const nextNode = toAfter ? node.nextSibling : node.previousSibling;
+            if (nextNode) {
+                return this.findFocusNode(nextNode, toAfter, excludeNodes);
             }
-            return !isWriting; // || !this.textarea.value
-        })).subscribe(ev => {
-            let key = ev.key;
-            const b = key === 'Process' && ev.code === 'Digit2';
-            if (b) {
-                key = '@';
+            return this.findFocusNodeByParent(node, toAfter, excludeNodes);
+        }
+        else if (node.nodeType === Node.TEXT_NODE) {
+            const containerPosition = this.renderer.getLocationByNativeNode(node);
+            if (containerPosition) {
+                return {
+                    slot: containerPosition.slot,
+                    offset: containerPosition.startIndex + offset
+                };
             }
-            const is = this.keyboard.execShortcut({
-                key: key,
-                altKey: ev.altKey,
-                shiftKey: ev.shiftKey,
-                ctrlKey: this.isMac ? ev.metaKey : ev.ctrlKey
-            });
-            if (is) {
-                if (b) {
-                    this.isSougouPinYin = true;
-                }
-                ev.preventDefault();
+            const nextNode = toAfter ? node.nextSibling : node.previousSibling;
+            if (nextNode) {
+                return this.findFocusNode(nextNode, toAfter, excludeNodes);
             }
-        }));
+            return this.findFocusNodeByParent(node, toAfter, excludeNodes);
+        }
+        return null;
     }
-    handleInput(textarea) {
-        this.subscription.add(merge(fromEvent(textarea, 'beforeinput').pipe(filter(ev => {
-            ev.preventDefault();
-            if (this.isSafari) {
-                return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition';
+    findFocusNode(node, toAfter = false, excludeNodes = []) {
+        if (excludeNodes.includes(node)) {
+            const next = toAfter ? node.nextSibling : node.previousSibling;
+            if (next) {
+                return this.findFocusNode(next, toAfter, excludeNodes);
             }
-            return !ev.isComposing && !!ev.data;
-        }), map(ev => {
-            return ev.data;
-        })), this.isSafari ? new Observable() : fromEvent(textarea, 'compositionend').pipe(map(ev => {
-            ev.preventDefault();
-            textarea.value = '';
-            return ev.data;
-        }), filter(() => {
-            const b = this.isSougouPinYin;
-            this.isSougouPinYin = false;
-            return !b;
-        }))).subscribe(text => {
-            if (text) {
-                this.commander.write(text);
-            }
-        }));
-    }
-    experimentalCompositionInput(textarea) {
-        let index;
-        let offset = 0;
-        let formats = [];
-        this.subscription.add(fromEvent(textarea, 'beforeinput').pipe(filter(ev => {
-            ev.preventDefault();
-            if (this.isSafari) {
-                return ev.inputType === 'insertText';
-                // return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition'
-            }
-            return !ev.isComposing && !!ev.data;
-        }), map(ev => {
-            return ev.data;
-        })).subscribe(text => {
-            if (text) {
-                this.commander.write(text);
-            }
-        }), fromEvent(textarea, 'compositionstart').subscribe(() => {
-            const startSlot = this.selection.startSlot;
-            formats = startSlot.extractFormatsByIndex(this.selection.startOffset);
-            formats.push([this.inputFormatter, true]);
-            this.scheduler.ignoreChangesTransact(() => {
-                this.commander.write('');
-            });
-            index = this.selection.startOffset;
-        }), fromEvent(textarea, 'compositionupdate').subscribe((ev) => {
-            const text = ev.data;
-            const startSlot = this.selection.startSlot;
-            this.selection.setBaseAndExtent(startSlot, index, startSlot, index + offset);
-            this.scheduler.ignoreChangesTransact(() => {
-                this.commander.insert(text, formats);
-            });
-            offset = text.length;
-        }), fromEvent(textarea, 'compositionend').subscribe((ev) => {
-            textarea.value = '';
-            const startSlot = this.selection.startSlot;
-            this.selection.setBaseAndExtent(startSlot, index, startSlot, index + offset);
-            this.scheduler.ignoreChangesTransact(() => {
-                if (!this.selection.isCollapsed) {
-                    this.commander.delete();
-                }
-            });
-            this.commander.insert(ev.data, formats.filter(i => i[0] !== this.inputFormatter));
-            offset = 0;
-        }));
+            return this.findFocusNodeByParent(node, toAfter, excludeNodes);
+        }
+        excludeNodes.push(node);
+        const position = this.renderer.getLocationByNativeNode(node);
+        if (position) {
+            return {
+                slot: position.slot,
+                offset: toAfter ? position.startIndex : position.endIndex
+            };
+        }
+        const firstChild = toAfter ? node.firstChild : node.lastChild;
+        if (firstChild) {
+            return this.findFocusNode(firstChild, toAfter, excludeNodes);
+        }
+        const nextSibling = toAfter ? node.nextSibling : node.previousSibling;
+        if (nextSibling) {
+            return this.findFocusNode(nextSibling, toAfter, excludeNodes);
+        }
+        return this.findFocusNodeByParent(node, toAfter, excludeNodes);
     }
-    createEditableFrame() {
-        return createElement('iframe', {
-            attrs: {
-                scrolling: 'no'
-            },
-            styles: {
-                border: 'none',
-                width: '100%',
-                display: 'block',
-                height: '100%',
-                position: 'relative',
-                top: this.isWindows ? '6px' : '0'
+    findFocusNodeByParent(node, toAfter, excludeNodes) {
+        const parentNode = node.parentNode;
+        if (parentNode) {
+            const parentPosition = this.renderer.getLocationByNativeNode(parentNode);
+            if (parentPosition) {
+                return {
+                    slot: parentPosition.slot,
+                    offset: toAfter ? parentPosition.endIndex : parentPosition.startIndex
+                };
             }
-        });
+            excludeNodes.push(node);
+            return this.findFocusNode(parentNode, toAfter, excludeNodes);
+        }
+        return null;
     }
 };
-Input.openExperimentalCompositionInput = false;
-Input = Input_1 = __decorate([
+SelectionBridge = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [Parser,
-        Keyboard,
-        Commander,
-        Selection,
+    __param(0, Inject(EDITOR_OPTIONS)),
+    __metadata("design:paramtypes", [Object, Injector,
         Controller,
-        Scheduler,
-        Caret])
-], Input);
+        Selection,
+        RootComponentRef,
+        Input,
+        Renderer])
+], SelectionBridge);
 
-/**
- * Textbus PC 端选区桥接实现
- */
-let SelectionBridge = class SelectionBridge {
-    constructor(injector, caret, controller, selection, rootComponentRef, input, renderer) {
+class CollaborateSelectionAwarenessDelegate {
+}
+let CollaborateCursor = class CollaborateCursor {
+    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
         this.injector = injector;
-        this.caret = caret;
-        this.controller = controller;
+        this.nativeSelection = nativeSelection;
+        this.scheduler = scheduler;
         this.selection = selection;
-        this.rootComponentRef = rootComponentRef;
-        this.input = input;
-        this.renderer = renderer;
-        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) {
-                this.caret.show(r, this.changeFromUser);
-            }
-            else {
-                this.caret.hide();
+        this.awarenessDelegate = awarenessDelegate;
+        this.host = createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                zIndex: 1
             }
-            if (r) {
-                input.focus();
+        });
+        this.canvasContainer = createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                overflow: 'hidden'
             }
-            else {
-                input.blur();
+        });
+        this.canvas = createElement('canvas', {
+            styles: {
+                position: 'absolute',
+                opacity: 0.5,
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: document.documentElement.clientHeight + 'px',
+                pointerEvents: 'none',
             }
         });
-        this.sub.add(fromEvent(document, 'focusin').subscribe(ev => {
-            let target = ev.target;
-            if (/^(input|textarea|select)$/i.test(target.nodeName)) {
-                if (target.tagName.toLowerCase() === 'input' && /^(range|date)$/.test(target.type)) {
-                    return;
-                }
-                this.ignoreSelectionChange = true;
-                return;
+        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
             }
-            while (target) {
-                if (target.contentEditable === 'true') {
-                    this.ignoreSelectionChange = true;
-                    return;
-                }
-                target = target.parentNode;
+        });
+        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();
         }));
-        this.sub.add(fromEvent(document, 'focusout').subscribe(() => {
-            this.ignoreSelectionChange = false;
-        }));
-    }
-    connect(connector) {
-        this.disConnect();
-        this.connector = connector;
-        this.syncSelection(connector);
-        this.listen(connector);
     }
-    disConnect() {
-        this.connector = null;
-        this.unListen();
+    refresh() {
+        this.draw(this.currentSelection);
     }
-    getRect(location) {
-        const { focus, anchor } = this.getPositionByRange({
-            focusOffset: location.offset,
-            anchorOffset: location.offset,
-            focusSlot: location.slot,
-            anchorSlot: location.slot
-        });
-        if (!focus || !anchor) {
-            return null;
-        }
-        const nativeRange = document.createRange();
-        nativeRange.setStart(focus.node, focus.offset);
-        nativeRange.collapse();
-        return getLayoutRectByRange(nativeRange);
+    destroy() {
+        this.subscription.unsubscribe();
     }
-    restore(abstractSelection, formLocal) {
-        this.changeFromUser = formLocal;
-        if (this.ignoreSelectionChange || !this.connector) {
-            return;
-        }
-        this.unListen();
-        if (!abstractSelection) {
-            this.nativeSelection.removeAllRanges();
-            this.selectionChangeEvent.next(null);
-            this.listen(this.connector);
-            return;
-        }
-        const { focus, anchor } = this.getPositionByRange(abstractSelection);
-        if (!focus || !anchor) {
-            this.nativeSelection.removeAllRanges();
-            this.selectionChangeEvent.next(null);
-            this.listen(this.connector);
-            return;
-        }
-        this.nativeSelection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
-        if (this.nativeSelection.rangeCount) {
-            const nativeRange = this.nativeSelection.getRangeAt(0);
-            this.selectionChangeEvent.next(nativeRange);
-        }
-        else {
-            this.selectionChangeEvent.next(null);
-        }
-        // hack start 浏览器会触发上面选区更改事件
-        const bind = () => {
-            if (this.connector) {
-                this.listen(this.connector);
-            }
-        };
-        if (typeof requestIdleCallback === 'function') {
-            requestIdleCallback(bind);
-        }
-        else {
-            setTimeout(bind, 30);
-        }
-        // hack end
-    }
-    destroy() {
-        this.caret.destroy();
-        this.sub.unsubscribe();
-    }
-    getPositionByRange(abstractSelection) {
-        let focus;
-        let anchor;
-        try {
-            focus = this.findSelectedNodeAndOffset(abstractSelection.focusSlot, abstractSelection.focusOffset);
-            anchor = focus;
-            if (abstractSelection.anchorSlot !== abstractSelection.focusSlot ||
-                abstractSelection.anchorOffset !== abstractSelection.focusOffset) {
-                anchor = this.findSelectedNodeAndOffset(abstractSelection.anchorSlot, abstractSelection.anchorOffset);
-            }
-            return {
-                focus,
-                anchor
-            };
-        }
-        catch (e) {
-            return {
-                focus: null,
-                anchor: null
-            };
-        }
-    }
-    getPreviousLinePositionByCurrent(position) {
-        return this.getLinePosition(position, false);
-    }
-    getNextLinePositionByCurrent(position) {
-        return this.getLinePosition(position, true);
-    }
-    getLinePosition(currentPosition, toNext) {
-        clearTimeout(this.cacheCaretPositionTimer);
-        let p;
-        if (this.oldCaretPosition) {
-            p = toNext ?
-                this.getNextLinePositionByOffset(currentPosition, this.oldCaretPosition.left) :
-                this.getPreviousLinePositionByOffset(currentPosition, this.oldCaretPosition.left);
-        }
-        else {
-            this.oldCaretPosition = this.getRect(currentPosition);
-            p = toNext ?
-                this.getNextLinePositionByOffset(currentPosition, this.oldCaretPosition.left) :
-                this.getPreviousLinePositionByOffset(currentPosition, this.oldCaretPosition.left);
-        }
-        this.cacheCaretPositionTimer = setTimeout(() => {
-            this.oldCaretPosition = null;
-        }, 3000);
-        return p;
-    }
-    /**
-     * 获取选区向上移动一行的位置。
-     * @param currentPosition
-     * @param startLeft 参考位置。
-     */
-    getPreviousLinePositionByOffset(currentPosition, startLeft) {
-        let isToPrevLine = false;
-        let loopCount = 0;
-        let minLeft = startLeft;
-        let focusSlot = currentPosition.slot;
-        let focusOffset = currentPosition.offset;
-        let minTop = this.getRect({
-            slot: focusSlot,
-            offset: focusOffset
-        }).top;
-        let position;
-        let oldPosition;
-        let oldLeft = 0;
-        while (true) {
-            loopCount++;
-            position = this.selection.getPreviousPositionByPosition(focusSlot, focusOffset);
-            focusSlot = position.slot;
-            focusOffset = position.offset;
-            const rect2 = this.getRect(position);
-            if (!isToPrevLine) {
-                if (rect2.left > minLeft || rect2.top < minTop) {
-                    isToPrevLine = true;
-                }
-                else if (rect2.left === minLeft && rect2.top === minTop) {
-                    return position;
-                }
-                minLeft = rect2.left;
-                minTop = rect2.top;
+    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;
             }
-            if (isToPrevLine) {
-                if (rect2.left < startLeft) {
-                    return position;
-                }
-                if (oldPosition) {
-                    if (rect2.left >= oldLeft) {
-                        return oldPosition;
-                    }
-                }
-                oldLeft = rect2.left;
-                oldPosition = position;
+            const { focus, anchor } = this.nativeSelection.getPositionByRange({
+                focusOffset,
+                anchorOffset,
+                focusSlot,
+                anchorSlot
+            });
+            if (!focus || !anchor) {
+                return;
             }
-            if (loopCount > 10000) {
-                break;
+            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);
             }
-        }
-        return position || {
-            offset: 0,
-            slot: focusSlot
-        };
-    }
-    /**
-     * 获取选区向下移动一行的位置。
-     * @param currentPosition
-     * @param startLeft 参考位置。
-     */
-    getNextLinePositionByOffset(currentPosition, startLeft) {
-        let isToNextLine = false;
-        let loopCount = 0;
-        let maxRight = startLeft;
-        let focusSlot = currentPosition.slot;
-        let focusOffset = currentPosition.offset;
-        let minTop = this.getRect({
-            slot: focusSlot,
-            offset: focusOffset
-        }).top;
-        let oldPosition;
-        let oldLeft = 0;
-        while (true) {
-            loopCount++;
-            const position = this.selection.getNextPositionByPosition(focusSlot, focusOffset);
-            focusSlot = position.slot;
-            focusOffset = position.offset;
-            const rect2 = this.getRect(position);
-            if (!isToNextLine) {
-                if (rect2.left < maxRight || rect2.top > minTop) {
-                    isToNextLine = true;
-                }
-                else if (rect2.left === maxRight && rect2.top === minTop) {
-                    return position;
-                }
-                maxRight = rect2.left;
-                minTop = rect2.top;
-                oldPosition = position;
+            let rects = false;
+            if (this.awarenessDelegate) {
+                rects = this.awarenessDelegate.getRects({
+                    focusOffset,
+                    anchorOffset,
+                    focusSlot,
+                    anchorSlot
+                }, nativeRange);
             }
-            if (isToNextLine) {
-                if (rect2.left > startLeft) {
-                    return oldPosition;
-                }
-                if (oldPosition) {
-                    if (rect2.left <= oldLeft) {
-                        return oldPosition;
-                    }
-                }
-                oldPosition = position;
-                oldLeft = rect2.left;
+            if (!rects) {
+                rects = nativeRange.getClientRects();
             }
-            if (loopCount > 10000) {
-                break;
+            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,
+                });
             }
-        }
-        return oldPosition || {
-            offset: focusSlot.length,
-            slot: focusSlot
-        };
-    }
-    unListen() {
-        this.subs.forEach(i => i.unsubscribe());
-        this.subs = [];
-    }
-    listen(connector) {
-        const selection = this.nativeSelection;
-        this.subs.push(fromEvent(this.docContainer, 'mousedown').subscribe(ev => {
-            if (this.ignoreSelectionChange || ev.button === 2) {
+            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;
             }
-            if (!ev.shiftKey) {
-                selection.removeAllRanges();
-            }
-        }), fromEvent(document, 'selectionchange').subscribe(() => {
-            this.syncSelection(connector);
-        }));
+            users.push(rect);
+        });
+        this.drawUserCursor(users);
     }
-    syncSelection(connector) {
-        var _a;
-        const selection = this.nativeSelection;
-        this.changeFromUser = true;
-        if (this.ignoreSelectionChange ||
-            selection.rangeCount === 0 ||
-            !this.docContainer.contains(selection.anchorNode)) {
-            return;
-        }
-        const nativeRange = selection.getRangeAt(0).cloneRange();
-        const isFocusEnd = selection.focusNode === nativeRange.endContainer && selection.focusOffset === nativeRange.endOffset;
-        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);
-                const nativeNode = this.renderer.getNativeNodeByVNode(vEle);
-                nativeRange.setEndAfter(nativeNode.lastChild);
-            }
-            else {
-                const vEle = this.renderer.getVNodeBySlot(this.rootComponentRef.component.slots.last);
-                const nativeNode = this.renderer.getNativeNodeByVNode(vEle);
-                nativeRange.setStartBefore(nativeNode.firstChild);
-            }
+    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;
         }
-        const startPosition = this.getCorrectedPosition(nativeRange.startContainer, nativeRange.startOffset, isFocusStart);
-        const endPosition = nativeRange.collapsed ?
-            startPosition :
-            this.getCorrectedPosition(nativeRange.endContainer, nativeRange.endOffset, isFocusEnd);
-        if ([Node.ELEMENT_NODE, Node.TEXT_NODE].includes((_a = nativeRange.commonAncestorContainer) === null || _a === void 0 ? void 0 : _a.nodeType) &&
-            startPosition && endPosition) {
-            const abstractSelection = isFocusEnd ? {
-                anchorSlot: startPosition.slot,
-                anchorOffset: startPosition.offset,
-                focusSlot: endPosition.slot,
-                focusOffset: endPosition.offset
-            } : {
-                focusSlot: startPosition.slot,
-                focusOffset: startPosition.offset,
-                anchorSlot: endPosition.slot,
-                anchorOffset: endPosition.offset
-            };
-            const { focus, anchor } = this.getPositionByRange(abstractSelection);
-            if (focus && anchor) {
-                let start = anchor;
-                let end = focus;
-                if (isFocusStart) {
-                    start = focus;
-                    end = anchor;
-                }
-                if (nativeRange.startContainer !== start.node || nativeRange.startOffset !== start.offset) {
-                    nativeRange.setStart(start.node, start.offset);
-                }
-                if (nativeRange.endContainer !== end.node || nativeRange.endOffset !== end.offset) {
-                    nativeRange.setEnd(end.node, end.offset);
-                }
-                connector.setSelection(abstractSelection);
-                this.selectionChangeEvent.next(nativeRange);
-            }
-            else {
-                connector.setSelection(null);
-            }
-            return;
+        for (let i = rects.length; i < this.tooltips.children.length; i++) {
+            this.tooltips.removeChild(this.tooltips.children[i]);
         }
-        connector.setSelection(null);
     }
-    findSelectedNodeAndOffset(slot, offset) {
-        const prev = slot.getContentAtIndex(offset - 1);
-        const vNodes = this.renderer.getVNodesBySlot(slot);
-        if (prev) {
-            if (typeof prev !== 'string') {
-                const vNode = this.renderer.getVNodeByComponent(prev);
-                const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
-                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) {
-                        continue;
-                    }
-                    if (vNode.tagName === 'br') {
-                        const position = this.renderer.getLocationByVNode(vNode);
-                        if (position) {
-                            if (position.endIndex === offset) {
-                                const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
-                                const parentNode = nativeNode.parentNode;
-                                return {
-                                    node: parentNode,
-                                    offset: Array.from(parentNode.childNodes).indexOf(nativeNode) + 1
-                                };
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        const current = slot.getContentAtIndex(offset);
-        if (current && typeof current !== 'string') {
-            const vNode = this.renderer.getVNodeByComponent(current);
-            const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
+    getUserCursor(index) {
+        let child = this.tooltips.children[index];
+        if (child) {
+            const anchor = child.children[0];
             return {
-                node: nativeNode.parentNode,
-                offset: Array.from(nativeNode.parentNode.childNodes).indexOf(nativeNode)
+                cursor: child,
+                anchor,
+                userTip: anchor.children[0]
             };
         }
-        for (const vNode of vNodes) {
-            if (vNode instanceof VElement) {
-                if (vNode.tagName === 'br') {
-                    const position = this.renderer.getLocationByVNode(vNode);
-                    if (position) {
-                        if (position.startIndex === offset) {
-                            const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
-                            const parentNode = nativeNode.parentNode;
-                            return {
-                                node: parentNode,
-                                offset: Array.from(parentNode.childNodes).indexOf(nativeNode)
-                            };
-                        }
-                    }
-                }
-                continue;
-            }
-            const position = this.renderer.getLocationByVNode(vNode);
-            if (position) {
-                if (offset >= position.startIndex && offset <= position.endIndex) {
-                    const nativeNode = this.renderer.getNativeNodeByVNode(vNode);
-                    return {
-                        node: nativeNode,
-                        offset: offset - position.startIndex
-                    };
-                }
-            }
-        }
-        return null;
-    }
-    getCorrectedPosition(node, offset, toAfter, excludeNodes = []) {
-        excludeNodes.push(node);
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            const containerPosition = this.renderer.getLocationByNativeNode(node);
-            const childNode = node.childNodes[offset];
-            if (childNode) {
-                const childPosition = this.renderer.getLocationByNativeNode(childNode);
-                if (childPosition) {
-                    if (containerPosition) {
-                        return {
-                            slot: childPosition.slot,
-                            offset: childPosition.startIndex
-                        };
-                    }
-                    return this.findFocusNode(childNode, toAfter, excludeNodes);
-                }
-                return this.findFocusNode(childNode, toAfter, excludeNodes);
-            }
-            const prevNode = node.childNodes[offset - 1];
-            if (prevNode) {
-                const prevPosition = this.renderer.getLocationByNativeNode(prevNode);
-                if (prevPosition && containerPosition) {
-                    return {
-                        slot: prevPosition.slot,
-                        offset: prevPosition.endIndex
-                    };
-                }
-            }
-            if (containerPosition) {
-                return {
-                    slot: containerPosition.slot,
-                    offset: containerPosition.endIndex
-                };
-            }
-            const nextNode = toAfter ? node.nextSibling : node.previousSibling;
-            if (nextNode) {
-                return this.findFocusNode(nextNode, toAfter, excludeNodes);
-            }
-            return this.findFocusNodeByParent(node, toAfter, excludeNodes);
-        }
-        else if (node.nodeType === Node.TEXT_NODE) {
-            const containerPosition = this.renderer.getLocationByNativeNode(node);
-            if (containerPosition) {
-                return {
-                    slot: containerPosition.slot,
-                    offset: containerPosition.startIndex + offset
-                };
-            }
-            const nextNode = toAfter ? node.nextSibling : node.previousSibling;
-            if (nextNode) {
-                return this.findFocusNode(nextNode, toAfter, excludeNodes);
+        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',
             }
-            return this.findFocusNodeByParent(node, toAfter, excludeNodes);
-        }
-        return null;
+        });
+        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
+        };
     }
-    findFocusNode(node, toAfter = false, excludeNodes = []) {
-        if (excludeNodes.includes(node)) {
-            const next = toAfter ? node.nextSibling : node.previousSibling;
-            if (next) {
-                return this.findFocusNode(next, toAfter, excludeNodes);
-            }
-            return this.findFocusNodeByParent(node, toAfter, excludeNodes);
-        }
-        excludeNodes.push(node);
-        const position = this.renderer.getLocationByNativeNode(node);
-        if (position) {
-            return {
-                slot: position.slot,
-                offset: toAfter ? position.startIndex : position.endIndex
-            };
-        }
-        const firstChild = toAfter ? node.firstChild : node.lastChild;
-        if (firstChild) {
-            return this.findFocusNode(firstChild, toAfter, excludeNodes);
+};
+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.formElement = {
+            input: ['disabled', 'readonly', 'value'],
+            select: ['disabled', 'readonly'],
+            option: ['disabled', 'selected', 'value'],
+            button: ['disabled'],
+            video: ['controls', 'autoplay', 'loop', 'muted'],
+            audio: ['controls', 'autoplay', 'loop', 'muted'],
+        };
+    }
+    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, '\u00a0'));
+    }
+    createElement(name) {
+        if (this.isSVG.test(name)) {
+            return document.createElementNS('http://www.w3.org/2000/svg', name);
         }
-        const nextSibling = toAfter ? node.nextSibling : node.previousSibling;
-        if (nextSibling) {
-            return this.findFocusNode(nextSibling, toAfter, excludeNodes);
+        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) {
+        if (target.textContent !== content) {
+            target.textContent = content;
         }
-        return this.findFocusNodeByParent(node, toAfter, excludeNodes);
     }
-    findFocusNodeByParent(node, toAfter, excludeNodes) {
-        const parentNode = node.parentNode;
-        if (parentNode) {
-            const parentPosition = this.renderer.getLocationByNativeNode(parentNode);
-            if (parentPosition) {
-                return {
-                    slot: parentPosition.slot,
-                    offset: toAfter ? parentPosition.endIndex : parentPosition.startIndex
-                };
-            }
-            excludeNodes.push(node);
-            return this.findFocusNode(parentNode, toAfter, excludeNodes);
+    removeStyle(target, key) {
+        target.style[key] = '';
+    }
+    setAttribute(target, key, value) {
+        if (this.possibleXlinkNames[key]) {
+            this.setXlinkAttribute(target, this.possibleXlinkNames[key], value);
+            return;
         }
-        return null;
+        target.setAttribute(key, value);
+        const propNames = this.formElement[target.tagName.toLowerCase()];
+        if (propNames && propNames.includes(key)) {
+            target[key] = Boolean(value);
+        }
+    }
+    removeAttribute(target, key) {
+        if (this.possibleXlinkNames[key]) {
+            this.removeXlinkAttribute(target, this.possibleXlinkNames[key]);
+        }
+        target.removeAttribute(key);
+        const propNames = this.formElement[target.tagName.toLowerCase()];
+        if (propNames && propNames.includes(key)) {
+            target[key] = false;
+        }
+    }
+    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, target) {
+        return s.replace(/\s\s+/g, str => {
+            return ' ' + Array.from({
+                length: str.length - 1
+            }).fill(target).join('');
+        }).replace(/^\s|\s$/g, target);
     }
 };
-SelectionBridge = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [Injector,
-        Caret,
-        Controller,
-        Selection,
-        RootComponentRef,
-        Input,
-        Renderer])
-], SelectionBridge);
+DomRenderer = DomRenderer_1 = __decorate([
+    Injectable()
+], DomRenderer);
 
-class CollaborateSelectionAwarenessDelegate {
-}
-let CollaborateCursor = class CollaborateCursor {
-    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
+var Parser_1;
+let Parser = Parser_1 = class Parser {
+    constructor(options, injector) {
+        var _a;
+        this.options = options;
         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
-            }
+        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.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();
-        }));
+        this.componentLoaders = componentLoaders;
+        this.formatLoaders = formatLoaders;
+        this.attributeLoaders = attributeLoaders;
     }
-    refresh() {
-        this.draw(this.currentSelection);
+    static parseHTML(html) {
+        return new DOMParser().parseFromString(html, 'text/html').body;
     }
-    destroy() {
-        this.subscription.unsubscribe();
+    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);
+        });
     }
-    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) {
+    parse(html, rootSlot) {
+        const element = Parser_1.parseHTML(html);
+        const formatItems = this.readFormats(element, rootSlot, []);
+        this.applyFormats(rootSlot, formatItems);
+        return rootSlot;
+    }
+    readComponent(el, slot, formatItems) {
+        if (el.nodeType === Node.ELEMENT_NODE) {
+            if (el.tagName === 'BR') {
+                slot.insert('\n');
                 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,
-                });
+            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 instanceof Slot) {
+                        result.toDelta().forEach(i => slot.insert(i.insert, i.formats));
+                        return;
+                    }
+                    slot.insert(result);
+                    return;
+                }
             }
-            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) {
+            this.readFormats(el, slot, formatItems);
+        }
+        else if (el.nodeType === Node.TEXT_NODE) {
+            const textContent = el.textContent;
+            if (/^\s*[\r\n]+\s*$/.test(textContent)) {
                 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]);
+            slot.insert(textContent);
         }
     }
-    getUserCursor(index) {
-        let child = this.tooltips.children[index];
-        if (child) {
-            const anchor = child.children[0];
+    readFormats(el, slot, formatItems) {
+        const formats = this.formatLoaders.filter(f => {
+            return f.match(el);
+        }).map(f => {
+            return f.read(el);
+        });
+        const startIndex = slot.index;
+        Array.from(el.childNodes).forEach(child => {
+            this.readComponent(child, slot, formatItems);
+        });
+        const endIndex = slot.index;
+        formatItems.unshift(...formats.map(i => {
             return {
-                cursor: child,
-                anchor,
-                userTip: anchor.children[0]
+                formatter: i.formatter,
+                value: i.value,
+                startIndex,
+                endIndex
             };
-        }
-        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]
+        }));
+        return formatItems;
+    }
+    readSlot(childSlot, slotRootElement, slotContentElement) {
+        this.attributeLoaders.filter(a => {
+            return a.match(slotRootElement);
+        }).forEach(a => {
+            const r = a.read(slotRootElement);
+            childSlot.setAttribute(r.attribute, r.value);
         });
-        child = createElement('span', {
-            styles: {
-                position: 'absolute',
-            },
-            children: [
-                anchor
-            ]
+        const childFormatItems = this.readFormats(slotContentElement, childSlot, []);
+        this.applyFormats(childSlot, childFormatItems);
+        return childSlot;
+    }
+    applyFormats(slot, formatItems) {
+        formatItems.forEach(i => {
+            slot.retain(i.startIndex);
+            slot.retain(i.endIndex - i.startIndex, i.formatter, i.value);
         });
-        this.tooltips.append(child);
-        return {
-            cursor: child,
-            anchor,
-            userTip
-        };
     }
 };
-CollaborateCursor = __decorate([
+Parser = Parser_1 = __decorate([
     Injectable(),
-    __param(4, Optional()),
-    __metadata("design:paramtypes", [Injector,
-        SelectionBridge,
-        Scheduler,
-        Selection,
-        CollaborateSelectionAwarenessDelegate])
-], CollaborateCursor);
+    __param(0, Inject(EDITOR_OPTIONS)),
+    __metadata("design:paramtypes", [Object, Injector])
+], Parser);
 
-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.formElement = {
-            input: ['disabled', 'readonly', 'value'],
-            select: ['disabled', 'readonly'],
-            option: ['disabled', 'selected', 'value'],
-            button: ['disabled'],
-            video: ['controls', 'autoplay', 'loop', 'muted'],
-            audio: ['controls', 'autoplay', 'loop', 'muted'],
-        };
+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 {
+    constructor(scheduler, editorMask) {
+        this.scheduler = scheduler;
+        this.editorMask = editorMask;
+        this.timer = null;
+        this.oldPosition = null;
+        this._display = true;
+        this.flashing = true;
+        this.subs = [];
+        this.positionChangeEvent = new Subject();
+        this.styleChangeEvent = new Subject();
+        this.oldRange = null;
+        this.isFixed = false;
+        this.onPositionChange = this.positionChangeEvent.pipe(distinctUntilChanged());
+        this.onStyleChange = this.styleChangeEvent.asObservable();
+        this.elementRef = createElement('div', {
+            styles: {
+                position: 'absolute',
+                width: '2px',
+                pointerEvents: 'none'
+            },
+            children: [
+                this.caret = createElement('span', {
+                    styles: {
+                        width: '100%',
+                        height: '100%',
+                        position: 'absolute',
+                        left: 0,
+                        top: 0
+                    }
+                })
+            ]
+        });
+        this.subs.push(fromEvent(document, 'mousedown').subscribe(() => {
+            this.flashing = false;
+        }), fromEvent(document, 'mouseup').subscribe(() => {
+            this.flashing = true;
+        }));
+        this.editorMask.appendChild(this.elementRef);
     }
-    listen(node, type, callback) {
-        node.addEventListener(type, callback);
+    get rect() {
+        return this.caret.getBoundingClientRect();
     }
-    unListen(node, type, callback) {
-        node.removeEventListener(type, callback);
+    set display(v) {
+        this._display = v;
+        this.caret.style.visibility = v ? 'visible' : 'hidden';
     }
-    createTextNode(textContent) {
-        return document.createTextNode(DomRenderer_1.replaceEmpty(textContent, '\u00a0'));
+    get display() {
+        return this._display;
     }
-    createElement(name) {
-        if (this.isSVG.test(name)) {
-            return document.createElementNS('http://www.w3.org/2000/svg', name);
+    refresh(isFixedCaret = false) {
+        this.isFixed = isFixedCaret;
+        if (this.oldRange) {
+            this.show(this.oldRange, false);
         }
-        return document.createElement(name);
+        this.isFixed = false;
+    }
+    show(range, restart) {
+        const oldRect = this.elementRef.getBoundingClientRect();
+        this.oldPosition = {
+            top: oldRect.top,
+            left: oldRect.left,
+            height: oldRect.height
+        };
+        this.oldRange = range;
+        if (restart || this.scheduler.lastChangesHasLocalUpdate) {
+            clearTimeout(this.timer);
+        }
+        this.updateCursorPosition(range);
+        if (range.collapsed) {
+            if (restart || this.scheduler.lastChangesHasLocalUpdate) {
+                this.display = true;
+                const toggleShowHide = () => {
+                    this.display = !this.display || !this.flashing;
+                    this.timer = setTimeout(toggleShowHide, 400);
+                };
+                clearTimeout(this.timer);
+                this.timer = setTimeout(toggleShowHide, 400);
+            }
+        }
+        else {
+            this.display = false;
+            clearTimeout(this.timer);
+        }
+    }
+    hide() {
+        this.display = false;
+        clearTimeout(this.timer);
+        this.positionChangeEvent.next(null);
+    }
+    destroy() {
+        clearTimeout(this.timer);
+        this.subs.forEach(i => i.unsubscribe());
+    }
+    correctScrollTop(scroller) {
+        this.subs.forEach(i => i.unsubscribe());
+        this.subs = [];
+        const scheduler = this.scheduler;
+        let docIsChanged = true;
+        function limitPosition(position) {
+            const { top, bottom } = scroller.getLimit();
+            const caretTop = position.top;
+            if (caretTop + position.height > bottom) {
+                const offset = caretTop - bottom + position.height;
+                scroller.setOffset(offset);
+            }
+            else if (position.top < top) {
+                scroller.setOffset(-(top - position.top));
+            }
+        }
+        let isPressed = false;
+        this.subs.push(scroller.onScroll.subscribe(() => {
+            if (this.oldPosition) {
+                const rect = this.rect;
+                this.oldPosition.top = rect.top;
+                this.oldPosition.left = rect.left;
+                this.oldPosition.height = rect.height;
+            }
+        }), fromEvent(document, 'mousedown', true).subscribe(() => {
+            isPressed = true;
+        }), fromEvent(document, 'mouseup', true).subscribe(() => {
+            isPressed = false;
+        }), scheduler.onDocChange.subscribe(() => {
+            docIsChanged = true;
+        }), this.onPositionChange.subscribe(position => {
+            if (position) {
+                if (docIsChanged) {
+                    if (scheduler.lastChangesHasLocalUpdate) {
+                        limitPosition(position);
+                    }
+                    else if (this.oldPosition) {
+                        const offset = Math.floor(position.top - this.oldPosition.top);
+                        scroller.setOffset(offset);
+                    }
+                }
+                else if (!isPressed) {
+                    if (this.isFixed && this.oldPosition) {
+                        const offset = Math.floor(position.top - this.oldPosition.top);
+                        scroller.setOffset(offset);
+                    }
+                    else {
+                        limitPosition(position);
+                    }
+                }
+            }
+            docIsChanged = false;
+        }));
+    }
+    updateCursorPosition(nativeRange) {
+        const startContainer = nativeRange.startContainer;
+        const node = (startContainer.nodeType === Node.ELEMENT_NODE ? startContainer : startContainer.parentNode);
+        if ((node === null || node === void 0 ? void 0 : node.nodeType) !== Node.ELEMENT_NODE || !nativeRange.collapsed) {
+            this.positionChangeEvent.next(null);
+            return;
+        }
+        const rect = getLayoutRectByRange(nativeRange);
+        const { fontSize, lineHeight, color } = getComputedStyle(node);
+        let height;
+        if (isNaN(+lineHeight)) {
+            const f = parseFloat(lineHeight);
+            if (isNaN(f)) {
+                height = parseFloat(fontSize);
+            }
+            else {
+                height = f;
+            }
+        }
+        else {
+            height = parseFloat(fontSize) * parseFloat(lineHeight);
+        }
+        const boxHeight = Math.floor(Math.max(height, rect.height));
+        // const boxHeight = Math.floor(height)
+        let rectTop = rect.top;
+        if (rect.height < height) {
+            rectTop -= (height - rect.height) / 2;
+        }
+        rectTop = Math.floor(rectTop);
+        const containerRect = this.editorMask.getBoundingClientRect();
+        const top = Math.floor(rectTop - containerRect.top);
+        const left = Math.floor(rect.left - containerRect.left);
+        Object.assign(this.elementRef.style, {
+            left: left + 'px',
+            top: top + 'px',
+            height: boxHeight + 'px',
+            lineHeight: boxHeight + 'px',
+            fontSize
+        });
+        this.caret.style.backgroundColor = color;
+        this.styleChangeEvent.next({
+            height: boxHeight + 'px',
+            lineHeight: boxHeight + 'px',
+            fontSize
+        });
+        this.positionChangeEvent.next({
+            left,
+            top: rectTop,
+            height: boxHeight
+        });
+    }
+}
+/**
+ * Textbus PC 端输入实现
+ */
+let MagicInput = class MagicInput extends Input {
+    constructor(parser, keyboard, commander, selection, controller, scheduler, injector) {
+        super();
+        this.parser = parser;
+        this.keyboard = keyboard;
+        this.commander = commander;
+        this.selection = selection;
+        this.controller = controller;
+        this.scheduler = scheduler;
+        this.injector = injector;
+        this.composition = false;
+        this.caret = new ExperimentalCaret(this.scheduler, this.injector.get(VIEW_MASK));
+        this.container = this.createEditableFrame();
+        this.subscription = new Subscription();
+        this.textarea = null;
+        this.isFocus = false;
+        this.nativeFocus = false;
+        this.isSafari = isSafari();
+        this.isMac = isMac();
+        this.isWindows = isWindows();
+        this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
+        this.onReady = new Promise(resolve => {
+            this.subscription.add(fromEvent(this.container, 'load').subscribe(() => {
+                const doc = this.container.contentDocument;
+                doc.open();
+                doc.write(iframeHTML);
+                doc.close();
+                this.doc = doc;
+                this.init();
+                resolve();
+            }), controller.onReadonlyStateChange.subscribe(() => {
+                if (controller.readonly) {
+                    this.blur();
+                }
+            }));
+        });
+        this.caret.elementRef.append(this.container);
+    }
+    focus(range, restart) {
+        var _a;
+        this.caret.show(range, restart);
+        if (this.controller.readonly) {
+            return;
+        }
+        if (!this.isFocus) {
+            (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.focus();
+            setTimeout(() => {
+                var _a, _b, _c;
+                if (!this.nativeFocus && this.isFocus) {
+                    this.subscription.unsubscribe();
+                    (_b = (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.textarea);
+                    this.subscription = new Subscription();
+                    this.init();
+                    (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
+                }
+            });
+        }
+        this.isFocus = true;
+    }
+    blur() {
+        var _a;
+        this.caret.hide();
+        (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.blur();
+        this.isFocus = false;
+    }
+    destroy() {
+        this.caret.destroy();
+        this.subscription.unsubscribe();
+    }
+    init() {
+        const doc = this.doc;
+        const contentBody = doc.body;
+        const textarea = doc.createElement('textarea');
+        contentBody.appendChild(textarea);
+        this.textarea = textarea;
+        this.subscription.add(fromEvent(textarea, 'blur').subscribe(() => {
+            this.isFocus = false;
+            this.nativeFocus = false;
+            this.caret.hide();
+        }), fromEvent(textarea, 'focus').subscribe(() => {
+            this.nativeFocus = true;
+        }), this.caret.onStyleChange.subscribe(style => {
+            Object.assign(textarea.style, style);
+        }));
+        this.handleInput(textarea);
+        this.handleShortcut(textarea);
+        this.handleDefaultActions(textarea);
+    }
+    handleDefaultActions(textarea) {
+        this.subscription.add(fromEvent(document, 'copy').subscribe(ev => {
+            const selection = this.selection;
+            if (!selection.isSelected) {
+                return;
+            }
+            if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
+                const content = selection.startSlot.getContentAtIndex(selection.startOffset);
+                if (typeof content === 'object') {
+                    const clipboardData = ev.clipboardData;
+                    const nativeSelection = document.getSelection();
+                    const range = nativeSelection.getRangeAt(0);
+                    const div = document.createElement('div');
+                    const fragment = range.cloneContents();
+                    div.append(fragment);
+                    clipboardData.setData('text/html', div.innerHTML);
+                    clipboardData.setData('text', div.innerText);
+                    ev.preventDefault();
+                }
+            }
+        }), fromEvent(textarea, 'paste').subscribe(ev => {
+            const text = ev.clipboardData.getData('Text');
+            const files = Array.from(ev.clipboardData.files);
+            if (files.length) {
+                Promise.all(files.filter(i => {
+                    return /image/i.test(i.type);
+                }).map(item => {
+                    const reader = new FileReader();
+                    return new Promise(resolve => {
+                        reader.onload = (event) => {
+                            resolve(event.target.result);
+                        };
+                        reader.readAsDataURL(item);
+                    });
+                })).then(urls => {
+                    const html = urls.map(i => {
+                        return `<img src=${i}>`;
+                    }).join('');
+                    this.handlePaste(html, text);
+                });
+                ev.preventDefault();
+                return;
+            }
+            const div = this.doc.createElement('div');
+            div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
+            div.contentEditable = 'true';
+            this.doc.body.appendChild(div);
+            div.focus();
+            setTimeout(() => {
+                const html = div.innerHTML;
+                this.handlePaste(html, text);
+                this.doc.body.removeChild(div);
+            });
+        }));
+    }
+    handlePaste(html, text) {
+        const slot = this.parser.parse(html, new Slot([
+            ContentType.BlockComponent,
+            ContentType.InlineComponent,
+            ContentType.Text
+        ]));
+        this.commander.paste(slot, text);
+    }
+    handleShortcut(textarea) {
+        let isWriting = false;
+        let isIgnore = false;
+        this.subscription.add(fromEvent(textarea, 'compositionstart').subscribe(() => {
+            isWriting = true;
+        }), fromEvent(textarea, 'compositionend').subscribe(() => {
+            isWriting = false;
+        }), fromEvent(textarea, 'beforeinput').subscribe(ev => {
+            if (this.isSafari) {
+                if (ev.inputType === 'insertFromComposition') {
+                    isIgnore = true;
+                }
+            }
+        }), fromEvent(textarea, 'keydown').pipe(filter(() => {
+            if (this.isSafari && isIgnore) {
+                isIgnore = false;
+                return false;
+            }
+            return !isWriting; // || !this.textarea.value
+        })).subscribe(ev => {
+            let key = ev.key;
+            const b = key === 'Process' && ev.code === 'Digit2';
+            if (b) {
+                key = '@';
+                this.isSougouPinYin = true;
+                ev.preventDefault();
+            }
+            const is = this.keyboard.execShortcut({
+                key: key,
+                altKey: ev.altKey,
+                shiftKey: ev.shiftKey,
+                ctrlKey: this.isMac ? ev.metaKey : ev.ctrlKey
+            });
+            if (is) {
+                ev.preventDefault();
+            }
+        }));
+    }
+    handleInput(textarea) {
+        this.subscription.add(merge(fromEvent(textarea, 'beforeinput').pipe(filter(ev => {
+            ev.preventDefault();
+            if (this.isSafari) {
+                return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition';
+            }
+            return !ev.isComposing && !!ev.data;
+        }), map(ev => {
+            return ev.data;
+        })), this.isSafari ? new Observable() : fromEvent(textarea, 'compositionend').pipe(map(ev => {
+            ev.preventDefault();
+            textarea.value = '';
+            return ev.data;
+        }), filter(() => {
+            const b = this.isSougouPinYin;
+            this.isSougouPinYin = false;
+            return !b;
+        }))).subscribe(text => {
+            if (text) {
+                this.commander.write(text);
+            }
+        }));
+    }
+    createEditableFrame() {
+        return createElement('iframe', {
+            attrs: {
+                scrolling: 'no'
+            },
+            styles: {
+                border: 'none',
+                width: '100%',
+                display: 'block',
+                height: '100%',
+                position: 'relative',
+                top: this.isWindows ? '6px' : '0'
+            }
+        });
     }
-    appendChild(parent, newChild) {
-        parent.appendChild(newChild);
+};
+MagicInput = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [Parser,
+        Keyboard,
+        Commander,
+        Selection,
+        Controller,
+        Scheduler,
+        Injector])
+], MagicInput);
+
+class NativeCaret {
+    constructor(scheduler) {
+        this.scheduler = scheduler;
+        this.onPositionChange = new Subject();
+        this.oldPosition = null;
+        this._nativeRange = null;
+        this.subs = [];
     }
-    remove(node) {
-        node.parentNode.removeChild(node);
+    set nativeRange(range) {
+        this._nativeRange = range;
+        if (range && range.collapsed) {
+            this.onPositionChange.next(range.getBoundingClientRect());
+        }
     }
-    insertBefore(newNode, ref) {
-        ref.parentNode.insertBefore(newNode, ref);
+    get nativeRange() {
+        return this._nativeRange;
     }
-    getChildByIndex(parent, index) {
-        return parent.childNodes[index] || null;
+    get rect() {
+        if (this.nativeRange) {
+            return this.nativeRange.getBoundingClientRect();
+        }
+        return {
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0
+        };
     }
-    addClass(target, name) {
-        target.classList.add(name);
+    refresh() {
+        //
     }
-    removeClass(target, name) {
-        target.classList.remove(name);
+    correctScrollTop(scroller) {
+        this.destroy();
+        const scheduler = this.scheduler;
+        let docIsChanged = true;
+        function limitPosition(position) {
+            const { top, bottom } = scroller.getLimit();
+            const caretTop = position.top;
+            if (caretTop + position.height > bottom) {
+                const offset = caretTop - bottom + position.height;
+                scroller.setOffset(offset);
+            }
+            else if (position.top < top) {
+                scroller.setOffset(-(top - position.top));
+            }
+        }
+        let isPressed = false;
+        this.subs.push(scroller.onScroll.subscribe(() => {
+            if (this.oldPosition) {
+                const rect = this.rect;
+                this.oldPosition.top = rect.top;
+                this.oldPosition.left = rect.left;
+                this.oldPosition.height = rect.height;
+            }
+        }), fromEvent(document, 'mousedown', true).subscribe(() => {
+            isPressed = true;
+        }), fromEvent(document, 'mouseup', true).subscribe(() => {
+            isPressed = false;
+        }), scheduler.onDocChange.subscribe(() => {
+            docIsChanged = true;
+        }), this.onPositionChange.subscribe(position => {
+            if (position) {
+                if (docIsChanged) {
+                    if (scheduler.lastChangesHasLocalUpdate) {
+                        limitPosition(position);
+                    }
+                    else if (this.oldPosition) {
+                        const offset = Math.floor(position.top - this.oldPosition.top);
+                        scroller.setOffset(offset);
+                    }
+                }
+                else if (!isPressed) {
+                    if (this.oldPosition) {
+                        const offset = Math.floor(position.top - this.oldPosition.top);
+                        scroller.setOffset(offset);
+                    }
+                    else {
+                        limitPosition(position);
+                    }
+                }
+            }
+            docIsChanged = false;
+        }));
     }
-    setStyle(target, key, value) {
-        target.style[key] = value !== null && value !== void 0 ? value : '';
+    destroy() {
+        this.subs.forEach(i => i.unsubscribe());
+        this.subs = [];
     }
-    removeStyle(target, key) {
-        target.style[key] = '';
+}
+let NativeInput = class NativeInput extends Input {
+    constructor(injector, parser, scheduler, selection, keyboard, commander, controller) {
+        super();
+        this.injector = injector;
+        this.parser = parser;
+        this.scheduler = scheduler;
+        this.selection = selection;
+        this.keyboard = keyboard;
+        this.commander = commander;
+        this.controller = controller;
+        this.caret = new NativeCaret(this.scheduler);
+        this.composition = false;
+        this.onReady = Promise.resolve();
+        this.nativeSelection = document.getSelection();
+        this.subscription = new Subscription();
+        this.nativeRange = null;
+        this.isSafari = isSafari();
+        this.isMac = isMac();
+        this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
+        this.documentView = injector.get(VIEW_DOCUMENT);
+        if (!controller.readonly) {
+            this.documentView.contentEditable = 'true';
+        }
+        this.subscription.add(controller.onReadonlyStateChange.subscribe(() => {
+            this.documentView.contentEditable = controller.readonly ? 'false' : 'true';
+        }));
+        this.handleShortcut(this.documentView);
+        this.handleInput(this.documentView);
+        this.handleDefaultActions(this.documentView);
     }
-    setAttribute(target, key, value) {
-        if (this.possibleXlinkNames[key]) {
-            this.setXlinkAttribute(target, this.possibleXlinkNames[key], value);
+    focus(nativeRange) {
+        if (this.controller.readonly) {
             return;
         }
-        target.setAttribute(key, value);
-        const propNames = this.formElement[target.tagName.toLowerCase()];
-        if (propNames && propNames.includes(key)) {
-            target[key] = Boolean(value);
-        }
+        this.caret.nativeRange = nativeRange;
+        this.nativeRange = nativeRange;
     }
-    removeAttribute(target, key) {
-        if (this.possibleXlinkNames[key]) {
-            this.removeXlinkAttribute(target, this.possibleXlinkNames[key]);
-        }
-        target.removeAttribute(key);
-        const propNames = this.formElement[target.tagName.toLowerCase()];
-        if (propNames && propNames.includes(key)) {
-            target[key] = false;
+    blur() {
+        if (this.nativeRange && this.nativeSelection.rangeCount > 0) {
+            const current = this.nativeSelection.getRangeAt(0);
+            if (current === this.nativeRange) {
+                this.nativeSelection.removeAllRanges();
+                this.nativeRange = null;
+                return;
+            }
         }
     }
-    setXlinkAttribute(target, key, value) {
-        target.setAttributeNS(this.xlinkNameSpace, key, value);
+    destroy() {
+        this.caret.destroy();
+        this.subscription.unsubscribe();
     }
-    removeXlinkAttribute(target, key) {
-        target.removeAttributeNS(this.xlinkNameSpace, key);
+    handleDefaultActions(textarea) {
+        this.subscription.add(fromEvent(document, 'copy').subscribe(ev => {
+            const selection = this.selection;
+            if (!selection.isSelected) {
+                return;
+            }
+            if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
+                const content = selection.startSlot.getContentAtIndex(selection.startOffset);
+                if (typeof content === 'object') {
+                    const clipboardData = ev.clipboardData;
+                    const nativeSelection = document.getSelection();
+                    const range = nativeSelection.getRangeAt(0);
+                    const div = document.createElement('div');
+                    const fragment = range.cloneContents();
+                    div.append(fragment);
+                    clipboardData.setData('text/html', div.innerHTML);
+                    clipboardData.setData('text', div.innerText);
+                    ev.preventDefault();
+                }
+            }
+        }), fromEvent(textarea, 'paste').subscribe(ev => {
+            const text = ev.clipboardData.getData('Text');
+            const files = Array.from(ev.clipboardData.files);
+            if (files.length) {
+                Promise.all(files.filter(i => {
+                    return /image/i.test(i.type);
+                }).map(item => {
+                    const reader = new FileReader();
+                    return new Promise(resolve => {
+                        reader.onload = (event) => {
+                            resolve(event.target.result);
+                        };
+                        reader.readAsDataURL(item);
+                    });
+                })).then(urls => {
+                    const html = urls.map(i => {
+                        return `<img src=${i}>`;
+                    }).join('');
+                    this.handlePaste(html, text);
+                });
+                ev.preventDefault();
+                return;
+            }
+            const div = document.createElement('div');
+            div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
+            div.contentEditable = 'true';
+            document.body.appendChild(div);
+            div.focus();
+            setTimeout(() => {
+                const html = div.innerHTML;
+                this.handlePaste(html, text);
+                document.body.removeChild(div);
+            });
+        }));
     }
-    replace(newChild, oldChild) {
-        oldChild.parentNode.replaceChild(newChild, oldChild);
+    handlePaste(html, text) {
+        const slot = this.parser.parse(html, new Slot([
+            ContentType.BlockComponent,
+            ContentType.InlineComponent,
+            ContentType.Text
+        ]));
+        this.commander.paste(slot, text);
     }
-    copy() {
-        document.execCommand('copy');
+    handleShortcut(input) {
+        let isWriting = false;
+        let isIgnore = false;
+        this.subscription.add(fromEvent(input, 'compositionstart').subscribe(() => {
+            isWriting = true;
+        }), fromEvent(input, 'compositionend').subscribe(() => {
+            isWriting = false;
+        }), fromEvent(input, 'beforeinput').subscribe(ev => {
+            if (this.isSafari) {
+                if (ev.inputType === 'insertFromComposition') {
+                    isIgnore = true;
+                }
+            }
+        }), fromEvent(input, 'keydown').pipe(filter(() => {
+            if (this.isSafari && isIgnore) {
+                isIgnore = false;
+                return false;
+            }
+            return !isWriting; // || !this.textarea.value
+        })).subscribe(ev => {
+            let key = ev.key;
+            const b = key === 'Process' && ev.code === 'Digit2';
+            if (b) {
+                key = '@';
+                this.isSougouPinYin = true;
+                ev.preventDefault();
+            }
+            const is = this.keyboard.execShortcut({
+                key: key,
+                altKey: ev.altKey,
+                shiftKey: ev.shiftKey,
+                ctrlKey: this.isMac ? ev.metaKey : ev.ctrlKey
+            });
+            if (is) {
+                ev.preventDefault();
+            }
+        }));
     }
-    static 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);
+    handleInput(input) {
+        this.subscription.add(fromEvent(input, 'compositionstart').subscribe(() => {
+            this.composition = true;
+        }), merge(fromEvent(input, 'beforeinput').pipe(filter(ev => {
+            ev.preventDefault();
+            if (this.isSafari) {
+                return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition';
+            }
+            return !ev.isComposing && !!ev.data;
+        }), map(ev => {
+            return ev.data;
+        })), this.isSafari ? new Observable() : fromEvent(input, 'compositionend').pipe(map(ev => {
+            ev.preventDefault();
+            return ev.data;
+        }), filter(() => {
+            const b = this.isSougouPinYin;
+            this.isSougouPinYin = false;
+            return !b;
+        }))).subscribe(text => {
+            this.composition = false;
+            if (text) {
+                this.commander.write(text);
+            }
+        }));
     }
 };
-DomRenderer = DomRenderer_1 = __decorate([
-    Injectable()
-], DomRenderer);
+NativeInput = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [Injector,
+        Parser,
+        Scheduler,
+        Selection,
+        Keyboard,
+        Commander,
+        Controller])
+], NativeInput);
 
 var OutputTranslator_1;
 /**
@@ -2038,6 +2270,9 @@ class Viewer extends Starter {
             }, {
                 provide: NativeSelectionBridge,
                 useClass: SelectionBridge
+            }, {
+                provide: Input,
+                useClass: options.useContentEditable ? NativeInput : MagicInput
             }, {
                 provide: Viewer,
                 useFactory: () => this
@@ -2047,8 +2282,6 @@ class Viewer extends Starter {
                 ...staticProviders,
                 DomRenderer,
                 Parser,
-                Input,
-                Caret,
                 SelectionBridge,
                 OutputTranslator,
                 CollaborateCursor
@@ -2132,10 +2365,10 @@ class Viewer extends Starter {
             host.appendChild(this.workbench);
             yield _super.mount.call(this, doc, component);
             const renderer = this.get(Renderer);
-            const caret = this.get(Caret);
+            const input = this.get(Input);
             this.subs.push(renderer.onViewUpdated.subscribe(() => {
                 this.changeEvent.next();
-            }), caret.onPositionChange.pipe(map(p => !!p), distinctUntilChanged()).subscribe(b => {
+            }), input.caret.onPositionChange.pipe(map(p => !!p), distinctUntilChanged()).subscribe(b => {
                 if (b) {
                     this._isFocus = true;
                     this.focusEvent.next();
@@ -2145,10 +2378,9 @@ class Viewer extends Starter {
                     this.blurEvent.next();
                 }
             }));
-            this.get(Input);
             this.isReady = true;
             if (this.options.autoFocus) {
-                this.get(Input).onReady.then(() => {
+                input.onReady.then(() => {
                     this.focus();
                 });
             }
@@ -2221,7 +2453,7 @@ class Viewer extends Starter {
         this.destroyed = true;
         this.subs.forEach(i => i.unsubscribe());
         const types = [
-            Input,
+            Input
         ];
         types.forEach(i => {
             this.get(i).destroy();
@@ -2312,7 +2544,8 @@ class Viewer extends Starter {
                 wordBreak: 'break-all',
                 boxSizing: 'border-box',
                 minHeight,
-                flex: 1
+                flex: 1,
+                outline: 'none'
             },
             attrs: {
                 'data-textbus-view': VIEW_DOCUMENT,
@@ -2362,4 +2595,4 @@ class Viewer extends Starter {
     }
 }
 
-export { Caret, CollaborateCursor, CollaborateSelectionAwarenessDelegate, DefaultShortcut, DomRenderer, EDITOR_OPTIONS, Input, OutputTranslator, Parser, SelectionBridge, VIEW_CONTAINER, VIEW_DOCUMENT, VIEW_MASK, Viewer, createElement, createTextNode, getLayoutRectByRange, isMac, isSafari, isWindows };
+export { CollaborateCursor, CollaborateSelectionAwarenessDelegate, DefaultShortcut, DomRenderer, EDITOR_OPTIONS, Input, MagicInput, NativeInput, OutputTranslator, Parser, SelectionBridge, VIEW_CONTAINER, VIEW_DOCUMENT, VIEW_MASK, Viewer, createElement, createTextNode, getLayoutRectByRange, isMac, isSafari, isWindows };