@textbus/platform-browser 3.0.0-alpha.22 → 3.0.0-alpha.24

package/bundles/index.js

@@ -5,42 +5,42 @@ var di = require('@tanbo/di');
 var core = require('@textbus/core');
 var stream = require('@tanbo/stream');
 
-function createElement(tagName, options = {}) {
-    const el = document.createElement(tagName);
-    if (options.classes) {
-        el.classList.add(...options.classes);
-    }
-    if (options.attrs) {
-        Object.keys(options.attrs).forEach(key => {
-            el.setAttribute(key, options.attrs[key]);
-        });
-    }
-    if (options.props) {
-        Object.keys(options.props).forEach(key => {
-            el[key] = options.props[key];
-        });
-    }
-    if (options.styles) {
-        Object.assign(el.style, options.styles);
-    }
-    if (options.children) {
-        options.children.filter(i => i).forEach(item => {
-            el.appendChild(item);
-        });
-    }
-    if (options.on) {
-        Object.keys(options.on).forEach(key => {
-            el.addEventListener(key, options.on[key]);
-        });
-    }
-    return el;
-}
-function createTextNode(content) {
-    return document.createTextNode(content);
+function createElement(tagName, options = {}) {
+    const el = document.createElement(tagName);
+    if (options.classes) {
+        el.classList.add(...options.classes);
+    }
+    if (options.attrs) {
+        Object.keys(options.attrs).forEach(key => {
+            el.setAttribute(key, options.attrs[key]);
+        });
+    }
+    if (options.props) {
+        Object.keys(options.props).forEach(key => {
+            el[key] = options.props[key];
+        });
+    }
+    if (options.styles) {
+        Object.assign(el.style, options.styles);
+    }
+    if (options.children) {
+        options.children.filter(i => i).forEach(item => {
+            el.appendChild(item);
+        });
+    }
+    if (options.on) {
+        Object.keys(options.on).forEach(key => {
+            el.addEventListener(key, options.on[key]);
+        });
+    }
+    return el;
+}
+function createTextNode(content) {
+    return document.createTextNode(content);
 }
 
-const isWindows = () => /win(dows|32|64)/i.test(navigator.userAgent);
-const isMac = () => /mac os/i.test(navigator.userAgent);
+const isWindows = () => /win(dows|32|64)/i.test(navigator.userAgent);
+const isMac = () => /mac os/i.test(navigator.userAgent);
 const isSafari = () => /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
 
 /******************************************************************************
@@ -83,2284 +83,2285 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-/**
- * 编辑器可选项依赖注入 token
- */
-const EDITOR_OPTIONS = new di.InjectionToken('EDITOR_OPTIONS');
-/**
- * 编辑器容器依赖注入 token
- */
-const VIEW_CONTAINER = new di.InjectionToken('VIEW_CONTAINER');
-/**
- * 编辑器容器依赖注入 token
- */
-const VIEW_DOCUMENT = new di.InjectionToken('VIEW_DOCUMENT');
-/**
- * 编辑器容器遮罩层 token
- */
+/**
+ * 编辑器可选项依赖注入 token
+ */
+const EDITOR_OPTIONS = new di.InjectionToken('EDITOR_OPTIONS');
+/**
+ * 编辑器容器依赖注入 token
+ */
+const VIEW_CONTAINER = new di.InjectionToken('VIEW_CONTAINER');
+/**
+ * 编辑器容器依赖注入 token
+ */
+const VIEW_DOCUMENT = new di.InjectionToken('VIEW_DOCUMENT');
+/**
+ * 编辑器容器遮罩层 token
+ */
 const VIEW_MASK = new di.InjectionToken('VIEW_MASK');
 
-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;
-}
-exports.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 stream.Subject();
-        this.styleChangeEvent = new stream.Subject();
-        this.oldRange = null;
-        this.isFixed = false;
-        this.editorMask = injector.get(VIEW_MASK);
-        this.onPositionChange = this.positionChangeEvent.pipe(stream.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(stream.fromEvent(document, 'mousedown').subscribe(() => {
-            this.flashing = false;
-        }), stream.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);
-            }
-        }
-        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) {
-        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.elementRef.getBoundingClientRect();
-                this.oldPosition.top = rect.top;
-                this.oldPosition.left = rect.left;
-                this.oldPosition.height = rect.height;
-            }
-        }), stream.fromEvent(document, 'mousedown', true).subscribe(() => {
-            isPressed = true;
-        }), stream.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
-        });
-    }
-};
-exports.Caret = __decorate([
-    di.Injectable(),
-    __metadata("design:paramtypes", [core.Scheduler,
-        di.Injector])
+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;
+}
+exports.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 stream.Subject();
+        this.styleChangeEvent = new stream.Subject();
+        this.oldRange = null;
+        this.isFixed = false;
+        this.editorMask = injector.get(VIEW_MASK);
+        this.onPositionChange = this.positionChangeEvent.pipe(stream.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(stream.fromEvent(document, 'mousedown').subscribe(() => {
+            this.flashing = false;
+        }), stream.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);
+            }
+        }
+        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) {
+        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.elementRef.getBoundingClientRect();
+                this.oldPosition.top = rect.top;
+                this.oldPosition.left = rect.left;
+                this.oldPosition.height = rect.height;
+            }
+        }), stream.fromEvent(document, 'mousedown', true).subscribe(() => {
+            isPressed = true;
+        }), stream.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
+        });
+    }
+};
+exports.Caret = __decorate([
+    di.Injectable(),
+    __metadata("design:paramtypes", [core.Scheduler,
+        di.Injector])
 ], exports.Caret);
 
-var Parser_1;
-exports.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;
-    }
-    readComponent(el, slot, formatItems) {
-        if (el.nodeType === Node.ELEMENT_NODE) {
-            if (el.tagName === 'BR') {
-                slot.insert('\n');
-                return;
-            }
-            for (const t of this.componentLoaders) {
-                if (t.match(el)) {
-                    const result = t.read(el, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
-                        return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
-                    });
-                    if (result instanceof core.Slot) {
-                        result.toDelta().forEach(i => slot.insert(i.insert, i.formats));
-                        return;
-                    }
-                    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 => {
-            return {
-                formatter: i.formatter,
-                value: i.value,
-                startIndex,
-                endIndex
-            };
-        }));
-        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);
-        });
-    }
-};
-exports.Parser = Parser_1 = __decorate([
-    di.Injectable(),
-    __param(0, di.Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, di.Injector])
+var Parser_1;
+exports.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;
+    }
+    readComponent(el, slot, formatItems) {
+        if (el.nodeType === Node.ELEMENT_NODE) {
+            if (el.tagName === 'BR') {
+                slot.insert('\n');
+                return;
+            }
+            for (const t of this.componentLoaders) {
+                if (t.match(el)) {
+                    const result = t.read(el, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
+                        return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
+                    });
+                    if (result instanceof core.Slot) {
+                        result.toDelta().forEach(i => slot.insert(i.insert, i.formats));
+                        return;
+                    }
+                    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 => {
+            return {
+                formatter: i.formatter,
+                value: i.value,
+                startIndex,
+                endIndex
+            };
+        }));
+        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);
+        });
+    }
+};
+exports.Parser = Parser_1 = __decorate([
+    di.Injectable(),
+    __param(0, di.Inject(EDITOR_OPTIONS)),
+    __metadata("design:paramtypes", [Object, di.Injector])
 ], exports.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 端输入实现
- */
-exports.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 stream.Subscription();
-        this.textarea = null;
-        this.isFocus = false;
-        this.inputFormatterId = '__TextbusInputFormatter__';
-        this.inputFormatter = {
-            name: this.inputFormatterId,
-            columned: false,
-            render: (children) => {
-                return core.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(stream.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 stream.Subscription();
-                    this.init();
-                    (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
-                }
-            });
-        }
-        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(stream.fromEvent(textarea, 'blur').subscribe(() => {
-            this.isFocus = false;
-            this.nativeFocus = false;
-            this.caret.hide();
-        }), stream.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(stream.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();
-                }
-            }
-        }), stream.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 core.Slot([
-            core.ContentType.BlockComponent,
-            core.ContentType.InlineComponent,
-            core.ContentType.Text
-        ]));
-        this.commander.paste(slot, text);
-    }
-    handleShortcut(textarea) {
-        let isWriting = false;
-        let isIgnore = false;
-        this.subscription.add(stream.fromEvent(textarea, 'compositionstart').subscribe(() => {
-            isWriting = true;
-        }), stream.fromEvent(textarea, 'compositionend').subscribe(() => {
-            isWriting = false;
-        }), stream.fromEvent(textarea, 'beforeinput').subscribe(ev => {
-            if (this.isSafari) {
-                if (ev.inputType === 'insertFromComposition') {
-                    isIgnore = true;
-                }
-            }
-        }), stream.fromEvent(textarea, 'keydown').pipe(stream.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 = '@';
-            }
-            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();
-            }
-        }));
-    }
-    handleInput(textarea) {
-        this.subscription.add(stream.merge(stream.fromEvent(textarea, 'beforeinput').pipe(stream.filter(ev => {
-            ev.preventDefault();
-            if (this.isSafari) {
-                return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition';
-            }
-            return !ev.isComposing && !!ev.data;
-        }), stream.map(ev => {
-            return ev.data;
-        })), this.isSafari ? new stream.Observable() : stream.fromEvent(textarea, 'compositionend').pipe(stream.map(ev => {
-            ev.preventDefault();
-            textarea.value = '';
-            return ev.data;
-        }), stream.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(stream.fromEvent(textarea, 'beforeinput').pipe(stream.filter(ev => {
-            ev.preventDefault();
-            if (this.isSafari) {
-                return ev.inputType === 'insertText';
-                // return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition'
-            }
-            return !ev.isComposing && !!ev.data;
-        }), stream.map(ev => {
-            return ev.data;
-        })).subscribe(text => {
-            if (text) {
-                this.commander.write(text);
-            }
-        }), stream.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;
-        }), stream.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;
-        }), stream.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;
-        }));
-    }
-    createEditableFrame() {
-        return createElement('iframe', {
-            attrs: {
-                scrolling: 'no'
-            },
-            styles: {
-                border: 'none',
-                width: '100%',
-                display: 'block',
-                height: '100%',
-                position: 'relative',
-                top: this.isWindows ? '6px' : '0'
-            }
-        });
-    }
-};
-exports.Input.openExperimentalCompositionInput = false;
-exports.Input = Input_1 = __decorate([
-    di.Injectable(),
-    __metadata("design:paramtypes", [exports.Parser,
-        core.Keyboard,
-        core.Commander,
-        core.Selection,
-        core.Controller,
-        core.Scheduler,
-        exports.Caret])
+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 端输入实现
+ */
+exports.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 stream.Subscription();
+        this.textarea = null;
+        this.isFocus = false;
+        this.inputFormatterId = '__TextbusInputFormatter__';
+        this.inputFormatter = {
+            name: this.inputFormatterId,
+            columned: false,
+            render: (children) => {
+                return core.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(stream.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 stream.Subscription();
+                    this.init();
+                    (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
+                }
+            });
+        }
+        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(stream.fromEvent(textarea, 'blur').subscribe(() => {
+            this.isFocus = false;
+            this.nativeFocus = false;
+            this.caret.hide();
+        }), stream.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(stream.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();
+                }
+            }
+        }), stream.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 core.Slot([
+            core.ContentType.BlockComponent,
+            core.ContentType.InlineComponent,
+            core.ContentType.Text
+        ]));
+        this.commander.paste(slot, text);
+    }
+    handleShortcut(textarea) {
+        let isWriting = false;
+        let isIgnore = false;
+        this.subscription.add(stream.fromEvent(textarea, 'compositionstart').subscribe(() => {
+            isWriting = true;
+        }), stream.fromEvent(textarea, 'compositionend').subscribe(() => {
+            isWriting = false;
+        }), stream.fromEvent(textarea, 'beforeinput').subscribe(ev => {
+            if (this.isSafari) {
+                if (ev.inputType === 'insertFromComposition') {
+                    isIgnore = true;
+                }
+            }
+        }), stream.fromEvent(textarea, 'keydown').pipe(stream.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 = '@';
+            }
+            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();
+            }
+        }));
+    }
+    handleInput(textarea) {
+        this.subscription.add(stream.merge(stream.fromEvent(textarea, 'beforeinput').pipe(stream.filter(ev => {
+            ev.preventDefault();
+            if (this.isSafari) {
+                return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition';
+            }
+            return !ev.isComposing && !!ev.data;
+        }), stream.map(ev => {
+            return ev.data;
+        })), this.isSafari ? new stream.Observable() : stream.fromEvent(textarea, 'compositionend').pipe(stream.map(ev => {
+            ev.preventDefault();
+            textarea.value = '';
+            return ev.data;
+        }), stream.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(stream.fromEvent(textarea, 'beforeinput').pipe(stream.filter(ev => {
+            ev.preventDefault();
+            if (this.isSafari) {
+                return ev.inputType === 'insertText';
+                // return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition'
+            }
+            return !ev.isComposing && !!ev.data;
+        }), stream.map(ev => {
+            return ev.data;
+        })).subscribe(text => {
+            if (text) {
+                this.commander.write(text);
+            }
+        }), stream.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;
+        }), stream.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;
+        }), stream.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;
+        }));
+    }
+    createEditableFrame() {
+        return createElement('iframe', {
+            attrs: {
+                scrolling: 'no'
+            },
+            styles: {
+                border: 'none',
+                width: '100%',
+                display: 'block',
+                height: '100%',
+                position: 'relative',
+                top: this.isWindows ? '6px' : '0'
+            }
+        });
+    }
+};
+exports.Input.openExperimentalCompositionInput = false;
+exports.Input = Input_1 = __decorate([
+    di.Injectable(),
+    __metadata("design:paramtypes", [exports.Parser,
+        core.Keyboard,
+        core.Commander,
+        core.Selection,
+        core.Controller,
+        core.Scheduler,
+        exports.Caret])
 ], exports.Input);
 
-/**
- * Textbus PC 端选区桥接实现
- */
-exports.SelectionBridge = class SelectionBridge {
-    constructor(injector, caret, controller, selection, rootComponentRef, input, renderer) {
-        this.injector = injector;
-        this.caret = caret;
-        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 stream.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(stream.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();
-            }
-            if (r) {
-                input.focus();
-            }
-            else {
-                input.blur();
-            }
-        });
-        this.sub.add(stream.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;
-            }
-            while (target) {
-                if (target.contentEditable === 'true') {
-                    this.ignoreSelectionChange = true;
-                    return;
-                }
-                target = target.parentNode;
-            }
-        }));
-        this.sub.add(stream.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 nativeRange = document.createRange();
-        nativeRange.setStart(focus.node, focus.offset);
-        nativeRange.collapse();
-        return getLayoutRectByRange(nativeRange);
-    }
-    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;
-            }
-            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;
-            }
-        }
-        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;
-            }
-            if (isToNextLine) {
-                if (rect2.left > startLeft) {
-                    return oldPosition;
-                }
-                if (oldPosition) {
-                    if (rect2.left <= oldLeft) {
-                        return oldPosition;
-                    }
-                }
-                oldPosition = position;
-                oldLeft = rect2.left;
-            }
-            if (loopCount > 10000) {
-                break;
-            }
-        }
-        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(stream.fromEvent(this.docContainer, 'mousedown').subscribe(ev => {
-            if (this.ignoreSelectionChange || ev.button === 2) {
-                return;
-            }
-            if (!ev.shiftKey) {
-                selection.removeAllRanges();
-            }
-        }), stream.fromEvent(document, 'selectionchange').subscribe(() => {
-            this.syncSelection(connector);
-        }));
-    }
-    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);
-            }
-        }
-        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;
-        }
-        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 core.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);
-            return {
-                node: nativeNode.parentNode,
-                offset: Array.from(nativeNode.parentNode.childNodes).indexOf(nativeNode)
-            };
-        }
-        for (const vNode of vNodes) {
-            if (vNode instanceof core.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);
-            }
-            return this.findFocusNodeByParent(node, toAfter, excludeNodes);
-        }
-        return null;
-    }
-    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);
-        }
-        const nextSibling = toAfter ? node.nextSibling : node.previousSibling;
-        if (nextSibling) {
-            return this.findFocusNode(nextSibling, toAfter, excludeNodes);
-        }
-        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);
-        }
-        return null;
-    }
-};
-exports.SelectionBridge = __decorate([
-    di.Injectable(),
-    __metadata("design:paramtypes", [di.Injector,
-        exports.Caret,
-        core.Controller,
-        core.Selection,
-        core.RootComponentRef,
-        exports.Input,
-        core.Renderer])
+/**
+ * Textbus PC 端选区桥接实现
+ */
+exports.SelectionBridge = class SelectionBridge {
+    constructor(injector, caret, controller, selection, rootComponentRef, input, renderer) {
+        this.injector = injector;
+        this.caret = caret;
+        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 stream.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(stream.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();
+            }
+            if (r) {
+                input.focus();
+            }
+            else {
+                input.blur();
+            }
+        });
+        this.sub.add(stream.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;
+            }
+            while (target) {
+                if (target.contentEditable === 'true') {
+                    this.ignoreSelectionChange = true;
+                    return;
+                }
+                target = target.parentNode;
+            }
+        }));
+        this.sub.add(stream.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 nativeRange = document.createRange();
+        nativeRange.setStart(focus.node, focus.offset);
+        nativeRange.collapse();
+        return getLayoutRectByRange(nativeRange);
+    }
+    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;
+            }
+            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;
+            }
+        }
+        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;
+            }
+            if (isToNextLine) {
+                if (rect2.left > startLeft) {
+                    return oldPosition;
+                }
+                if (oldPosition) {
+                    if (rect2.left <= oldLeft) {
+                        return oldPosition;
+                    }
+                }
+                oldPosition = position;
+                oldLeft = rect2.left;
+            }
+            if (loopCount > 10000) {
+                break;
+            }
+        }
+        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(stream.fromEvent(this.docContainer, 'mousedown').subscribe(ev => {
+            if (this.ignoreSelectionChange || ev.button === 2) {
+                return;
+            }
+            if (!ev.shiftKey) {
+                selection.removeAllRanges();
+            }
+        }), stream.fromEvent(document, 'selectionchange').subscribe(() => {
+            this.syncSelection(connector);
+        }));
+    }
+    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);
+            }
+        }
+        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;
+        }
+        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 core.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);
+            return {
+                node: nativeNode.parentNode,
+                offset: Array.from(nativeNode.parentNode.childNodes).indexOf(nativeNode)
+            };
+        }
+        for (const vNode of vNodes) {
+            if (vNode instanceof core.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);
+            }
+            return this.findFocusNodeByParent(node, toAfter, excludeNodes);
+        }
+        return null;
+    }
+    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);
+        }
+        const nextSibling = toAfter ? node.nextSibling : node.previousSibling;
+        if (nextSibling) {
+            return this.findFocusNode(nextSibling, toAfter, excludeNodes);
+        }
+        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);
+        }
+        return null;
+    }
+};
+exports.SelectionBridge = __decorate([
+    di.Injectable(),
+    __metadata("design:paramtypes", [di.Injector,
+        exports.Caret,
+        core.Controller,
+        core.Selection,
+        core.RootComponentRef,
+        exports.Input,
+        core.Renderer])
 ], exports.SelectionBridge);
 
-class CollaborateSelectionAwarenessDelegate {
-}
-exports.CollaborateCursor = class CollaborateCursor {
-    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate = null) {
-        this.injector = injector;
-        this.nativeSelection = nativeSelection;
-        this.scheduler = scheduler;
-        this.selection = selection;
-        this.awarenessDelegate = awarenessDelegate;
-        this.host = createElement('div', {
-            styles: {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                zIndex: 1
-            }
-        });
-        this.canvasContainer = createElement('div', {
-            styles: {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                overflow: 'hidden'
-            }
-        });
-        this.canvas = createElement('canvas', {
-            styles: {
-                position: 'absolute',
-                opacity: 0.5,
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: document.documentElement.clientHeight + 'px',
-                pointerEvents: 'none',
-            }
-        });
-        this.context = this.canvas.getContext('2d');
-        this.tooltips = createElement('div', {
-            styles: {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                fontSize: '12px',
-                zIndex: 10
-            }
-        });
-        this.onRectsChange = new stream.Subject();
-        this.subscription = new stream.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();
-            }
-        }), stream.fromEvent(window, 'resize').subscribe(() => {
-            this.canvas.style.height = document.documentElement.clientHeight + 'px';
-            this.refresh();
-        }), this.scheduler.onDocChanged.subscribe(() => {
-            this.refresh();
-        }));
-    }
-    refresh() {
-        this.draw(this.currentSelection);
-    }
-    destroy() {
-        this.subscription.unsubscribe();
-    }
-    draw(paths) {
-        this.currentSelection = paths;
-        const containerRect = this.container.getBoundingClientRect();
-        this.canvas.style.top = containerRect.top * -1 + 'px';
-        this.canvas.width = this.canvas.offsetWidth;
-        this.canvas.height = this.canvas.offsetHeight;
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        const users = [];
-        paths.filter(i => {
-            return i.paths.anchor.length && i.paths.focus.length;
-        }).forEach(item => {
-            const anchorPaths = [...item.paths.anchor];
-            const focusPaths = [...item.paths.focus];
-            const anchorOffset = anchorPaths.pop();
-            const anchorSlot = this.selection.findSlotByPaths(anchorPaths);
-            const focusOffset = focusPaths.pop();
-            const focusSlot = this.selection.findSlotByPaths(focusPaths);
-            if (!anchorSlot || !focusSlot) {
-                return;
-            }
-            const { focus, anchor } = this.nativeSelection.getPositionByRange({
-                focusOffset,
-                anchorOffset,
-                focusSlot,
-                anchorSlot
-            });
-            if (!focus || !anchor) {
-                return;
-            }
-            const nativeRange = document.createRange();
-            nativeRange.setStart(anchor.node, anchor.offset);
-            nativeRange.setEnd(focus.node, focus.offset);
-            if ((anchor.node !== focus.node || anchor.offset !== focus.offset) && nativeRange.collapsed) {
-                nativeRange.setStart(focus.node, focus.offset);
-                nativeRange.setEnd(anchor.node, anchor.offset);
-            }
-            let rects = false;
-            if (this.awarenessDelegate) {
-                rects = this.awarenessDelegate.getRects({
-                    focusOffset,
-                    anchorOffset,
-                    focusSlot,
-                    anchorSlot
-                }, nativeRange);
-            }
-            if (!rects) {
-                rects = nativeRange.getClientRects();
-            }
-            const selectionRects = [];
-            for (let i = rects.length - 1; i >= 0; i--) {
-                const rect = rects[i];
-                selectionRects.push({
-                    id: item.id,
-                    color: item.color,
-                    username: item.username,
-                    left: rect.left - containerRect.left,
-                    top: rect.top,
-                    width: rect.width,
-                    height: rect.height,
-                });
-            }
-            this.onRectsChange.next(selectionRects);
-            const cursorRange = nativeRange.cloneRange();
-            cursorRange.setStart(focus.node, focus.offset);
-            cursorRange.collapse(true);
-            const cursorRect = getLayoutRectByRange(cursorRange);
-            const rect = {
-                id: item.id,
-                username: item.username,
-                color: item.color,
-                left: cursorRect.left - containerRect.left,
-                top: cursorRect.top - containerRect.top,
-                width: 1,
-                height: cursorRect.height
-            };
-            if (rect.left < 0 || rect.top < 0 || rect.left > containerRect.width) {
-                return;
-            }
-            users.push(rect);
-        });
-        this.drawUserCursor(users);
-    }
-    drawUserCursor(rects) {
-        for (let i = 0; i < rects.length; i++) {
-            const rect = rects[i];
-            const { cursor, userTip, anchor } = this.getUserCursor(i);
-            Object.assign(cursor.style, {
-                left: rect.left + 'px',
-                top: rect.top + 'px',
-                width: rect.width + 'px',
-                height: rect.height + 'px',
-                background: rect.color,
-                display: 'block'
-            });
-            anchor.style.background = rect.color;
-            userTip.innerText = rect.username;
-            userTip.style.background = rect.color;
-        }
-        for (let i = rects.length; i < this.tooltips.children.length; i++) {
-            this.tooltips.removeChild(this.tooltips.children[i]);
-        }
-    }
-    getUserCursor(index) {
-        let child = this.tooltips.children[index];
-        if (child) {
-            const anchor = child.children[0];
-            return {
-                cursor: child,
-                anchor,
-                userTip: anchor.children[0]
-            };
-        }
-        const userTip = createElement('span', {
-            styles: {
-                position: 'absolute',
-                left: '50%',
-                transform: 'translateX(-50%)',
-                marginBottom: '2px',
-                bottom: '100%',
-                whiteSpace: 'nowrap',
-                color: '#fff',
-                boxShadow: '0 1px 2px rgba(0,0,0,.1)',
-                opacity: 0.8,
-                borderRadius: '3px',
-                padding: '3px 5px',
-                pointerEvents: 'none',
-            }
-        });
-        const anchor = createElement('span', {
-            styles: {
-                position: 'absolute',
-                top: '-2px',
-                left: '-2px',
-                width: '5px',
-                height: '5px',
-                borderRadius: '50%',
-                pointerEvents: 'auto',
-                pointer: 'cursor',
-            },
-            children: [userTip]
-        });
-        child = createElement('span', {
-            styles: {
-                position: 'absolute',
-            },
-            children: [
-                anchor
-            ]
-        });
-        this.tooltips.append(child);
-        return {
-            cursor: child,
-            anchor,
-            userTip
-        };
-    }
-};
-exports.CollaborateCursor = __decorate([
-    di.Injectable(),
-    __param(4, di.Optional()),
-    __metadata("design:paramtypes", [di.Injector,
-        exports.SelectionBridge,
-        core.Scheduler,
-        core.Selection, Object])
+class CollaborateSelectionAwarenessDelegate {
+}
+exports.CollaborateCursor = class CollaborateCursor {
+    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
+        this.injector = injector;
+        this.nativeSelection = nativeSelection;
+        this.scheduler = scheduler;
+        this.selection = selection;
+        this.awarenessDelegate = awarenessDelegate;
+        this.host = createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                zIndex: 1
+            }
+        });
+        this.canvasContainer = createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                overflow: 'hidden'
+            }
+        });
+        this.canvas = createElement('canvas', {
+            styles: {
+                position: 'absolute',
+                opacity: 0.5,
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: document.documentElement.clientHeight + 'px',
+                pointerEvents: 'none',
+            }
+        });
+        this.context = this.canvas.getContext('2d');
+        this.tooltips = createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                fontSize: '12px',
+                zIndex: 10
+            }
+        });
+        this.onRectsChange = new stream.Subject();
+        this.subscription = new stream.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();
+            }
+        }), stream.fromEvent(window, 'resize').subscribe(() => {
+            this.canvas.style.height = document.documentElement.clientHeight + 'px';
+            this.refresh();
+        }), this.scheduler.onDocChanged.subscribe(() => {
+            this.refresh();
+        }));
+    }
+    refresh() {
+        this.draw(this.currentSelection);
+    }
+    destroy() {
+        this.subscription.unsubscribe();
+    }
+    draw(paths) {
+        this.currentSelection = paths;
+        const containerRect = this.container.getBoundingClientRect();
+        this.canvas.style.top = containerRect.top * -1 + 'px';
+        this.canvas.width = this.canvas.offsetWidth;
+        this.canvas.height = this.canvas.offsetHeight;
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        const users = [];
+        paths.filter(i => {
+            return i.paths.anchor.length && i.paths.focus.length;
+        }).forEach(item => {
+            const anchorPaths = [...item.paths.anchor];
+            const focusPaths = [...item.paths.focus];
+            const anchorOffset = anchorPaths.pop();
+            const anchorSlot = this.selection.findSlotByPaths(anchorPaths);
+            const focusOffset = focusPaths.pop();
+            const focusSlot = this.selection.findSlotByPaths(focusPaths);
+            if (!anchorSlot || !focusSlot) {
+                return;
+            }
+            const { focus, anchor } = this.nativeSelection.getPositionByRange({
+                focusOffset,
+                anchorOffset,
+                focusSlot,
+                anchorSlot
+            });
+            if (!focus || !anchor) {
+                return;
+            }
+            const nativeRange = document.createRange();
+            nativeRange.setStart(anchor.node, anchor.offset);
+            nativeRange.setEnd(focus.node, focus.offset);
+            if ((anchor.node !== focus.node || anchor.offset !== focus.offset) && nativeRange.collapsed) {
+                nativeRange.setStart(focus.node, focus.offset);
+                nativeRange.setEnd(anchor.node, anchor.offset);
+            }
+            let rects = false;
+            if (this.awarenessDelegate) {
+                rects = this.awarenessDelegate.getRects({
+                    focusOffset,
+                    anchorOffset,
+                    focusSlot,
+                    anchorSlot
+                }, nativeRange);
+            }
+            if (!rects) {
+                rects = nativeRange.getClientRects();
+            }
+            const selectionRects = [];
+            for (let i = rects.length - 1; i >= 0; i--) {
+                const rect = rects[i];
+                selectionRects.push({
+                    id: item.id,
+                    color: item.color,
+                    username: item.username,
+                    left: rect.left - containerRect.left,
+                    top: rect.top,
+                    width: rect.width,
+                    height: rect.height,
+                });
+            }
+            this.onRectsChange.next(selectionRects);
+            const cursorRange = nativeRange.cloneRange();
+            cursorRange.setStart(focus.node, focus.offset);
+            cursorRange.collapse(true);
+            const cursorRect = getLayoutRectByRange(cursorRange);
+            const rect = {
+                id: item.id,
+                username: item.username,
+                color: item.color,
+                left: cursorRect.left - containerRect.left,
+                top: cursorRect.top - containerRect.top,
+                width: 1,
+                height: cursorRect.height
+            };
+            if (rect.left < 0 || rect.top < 0 || rect.left > containerRect.width) {
+                return;
+            }
+            users.push(rect);
+        });
+        this.drawUserCursor(users);
+    }
+    drawUserCursor(rects) {
+        for (let i = 0; i < rects.length; i++) {
+            const rect = rects[i];
+            const { cursor, userTip, anchor } = this.getUserCursor(i);
+            Object.assign(cursor.style, {
+                left: rect.left + 'px',
+                top: rect.top + 'px',
+                width: rect.width + 'px',
+                height: rect.height + 'px',
+                background: rect.color,
+                display: 'block'
+            });
+            anchor.style.background = rect.color;
+            userTip.innerText = rect.username;
+            userTip.style.background = rect.color;
+        }
+        for (let i = rects.length; i < this.tooltips.children.length; i++) {
+            this.tooltips.removeChild(this.tooltips.children[i]);
+        }
+    }
+    getUserCursor(index) {
+        let child = this.tooltips.children[index];
+        if (child) {
+            const anchor = child.children[0];
+            return {
+                cursor: child,
+                anchor,
+                userTip: anchor.children[0]
+            };
+        }
+        const userTip = createElement('span', {
+            styles: {
+                position: 'absolute',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                marginBottom: '2px',
+                bottom: '100%',
+                whiteSpace: 'nowrap',
+                color: '#fff',
+                boxShadow: '0 1px 2px rgba(0,0,0,.1)',
+                opacity: 0.8,
+                borderRadius: '3px',
+                padding: '3px 5px',
+                pointerEvents: 'none',
+            }
+        });
+        const anchor = createElement('span', {
+            styles: {
+                position: 'absolute',
+                top: '-2px',
+                left: '-2px',
+                width: '5px',
+                height: '5px',
+                borderRadius: '50%',
+                pointerEvents: 'auto',
+                pointer: 'cursor',
+            },
+            children: [userTip]
+        });
+        child = createElement('span', {
+            styles: {
+                position: 'absolute',
+            },
+            children: [
+                anchor
+            ]
+        });
+        this.tooltips.append(child);
+        return {
+            cursor: child,
+            anchor,
+            userTip
+        };
+    }
+};
+exports.CollaborateCursor = __decorate([
+    di.Injectable(),
+    __param(4, di.Optional()),
+    __metadata("design:paramtypes", [di.Injector,
+        exports.SelectionBridge,
+        core.Scheduler,
+        core.Selection,
+        CollaborateSelectionAwarenessDelegate])
 ], exports.CollaborateCursor);
 
-var DomRenderer_1;
-/**
- * Textbus PC 端浏览器渲染能力实现
- */
-exports.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);
-        }
-        return document.createElement(name);
-    }
-    appendChild(parent, newChild) {
-        parent.appendChild(newChild);
-    }
-    remove(node) {
-        node.parentNode.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 : '';
-    }
-    removeStyle(target, key) {
-        target.style[key] = '';
-    }
-    setAttribute(target, key, value) {
-        if (this.possibleXlinkNames[key]) {
-            this.setXlinkAttribute(target, this.possibleXlinkNames[key], value);
-            return;
-        }
-        target.setAttribute(key, value);
-        const 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);
-    }
-};
-exports.DomRenderer = DomRenderer_1 = __decorate([
-    di.Injectable()
+var DomRenderer_1;
+/**
+ * Textbus PC 端浏览器渲染能力实现
+ */
+exports.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);
+        }
+        return document.createElement(name);
+    }
+    appendChild(parent, newChild) {
+        parent.appendChild(newChild);
+    }
+    remove(node) {
+        node.parentNode.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 : '';
+    }
+    removeStyle(target, key) {
+        target.style[key] = '';
+    }
+    setAttribute(target, key, value) {
+        if (this.possibleXlinkNames[key]) {
+            this.setXlinkAttribute(target, this.possibleXlinkNames[key], value);
+            return;
+        }
+        target.setAttribute(key, value);
+        const 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);
+    }
+};
+exports.DomRenderer = DomRenderer_1 = __decorate([
+    di.Injectable()
 ], exports.DomRenderer);
 
-var OutputTranslator_1;
-/**
- * HTML 输出转换器
- */
-exports.OutputTranslator = OutputTranslator_1 = class OutputTranslator {
-    constructor() {
-        this.singleTagTest = new RegExp(`^(${OutputTranslator_1.singleTags.join('|')})$`, 'i');
-    }
-    transform(vDom) {
-        return vDom.children.map(child => {
-            return this.vDomToHTMLString(child);
-        }).join('');
-    }
-    vDomToHTMLString(vDom) {
-        const xssFilter = OutputTranslator_1.simpleXSSFilter;
-        if (vDom instanceof core.VTextNode) {
-            return this.replaceEmpty(xssFilter.text(vDom.textContent), '&nbsp;');
-        }
-        const styles = Array.from(vDom.styles.keys()).filter(key => {
-            const v = vDom.styles.get(key);
-            return !(v === undefined || v === null || v === '');
-        }).map(key => {
-            const k = key.replace(/(?=[A-Z])/g, '-').toLowerCase();
-            return xssFilter.attrValue(`${k}:${vDom.styles.get(key)}`);
-        }).join(';');
-        const attrs = Array.from(vDom.attrs.keys()).filter(key => key !== 'ref' && vDom.attrs.get(key) !== false).map(k => {
-            const key = xssFilter.attrName(k);
-            const value = vDom.attrs.get(k);
-            return (value === true ? `${key}` : `${key}="${xssFilter.attrValue(`${value}`)}"`);
-        });
-        if (styles) {
-            attrs.push(`style="${styles}"`);
-        }
-        if (vDom.classes && vDom.classes.size) {
-            attrs.push(`class="${xssFilter.attrValue(Array.from(vDom.classes).join(' '))}"`);
-        }
-        let attrStr = attrs.join(' ');
-        attrStr = attrStr ? ' ' + attrStr : '';
-        if (this.singleTagTest.test(vDom.tagName)) {
-            return `<${vDom.tagName}${attrStr}>`;
-        }
-        const childHTML = vDom.children.map(child => {
-            return this.vDomToHTMLString(child);
-        }).join('');
-        return [
-            `<${vDom.tagName}${attrStr}>`,
-            childHTML,
-            `</${vDom.tagName}>`
-        ].join('');
-    }
-    replaceEmpty(s, target) {
-        return s.replace(/\s\s+/g, str => {
-            return ' ' + Array.from({
-                length: str.length - 1
-            }).fill(target).join('');
-        }).replace(/^\s|\s$/g, target);
-    }
-};
-exports.OutputTranslator.singleTags = 'br,img,hr'.split(',');
-exports.OutputTranslator.simpleXSSFilter = {
-    text(text) {
-        return text.replace(/[><&]/g, str => {
-            return {
-                '<': '&lt;',
-                '>': '&gt;',
-                '&': '&amp;'
-            }[str];
-        });
-    },
-    attrName(text) {
-        return text.replace(/[><"'&]/g, str => {
-            return {
-                '<': '&lt;',
-                '>': '&gt;',
-                '"': '&quot;',
-                '\'': '&#x27;',
-                '&': '&amp;'
-            }[str];
-        });
-    },
-    attrValue(text) {
-        return text.replace(/["']/g, str => {
-            return {
-                '"': '&quot;',
-                '\'': '&#x27;'
-            }[str];
-        });
-    }
-};
-exports.OutputTranslator = OutputTranslator_1 = __decorate([
-    di.Injectable()
+var OutputTranslator_1;
+/**
+ * HTML 输出转换器
+ */
+exports.OutputTranslator = OutputTranslator_1 = class OutputTranslator {
+    constructor() {
+        this.singleTagTest = new RegExp(`^(${OutputTranslator_1.singleTags.join('|')})$`, 'i');
+    }
+    transform(vDom) {
+        return vDom.children.map(child => {
+            return this.vDomToHTMLString(child);
+        }).join('');
+    }
+    vDomToHTMLString(vDom) {
+        const xssFilter = OutputTranslator_1.simpleXSSFilter;
+        if (vDom instanceof core.VTextNode) {
+            return this.replaceEmpty(xssFilter.text(vDom.textContent), '&nbsp;');
+        }
+        const styles = Array.from(vDom.styles.keys()).filter(key => {
+            const v = vDom.styles.get(key);
+            return !(v === undefined || v === null || v === '');
+        }).map(key => {
+            const k = key.replace(/(?=[A-Z])/g, '-').toLowerCase();
+            return xssFilter.attrValue(`${k}:${vDom.styles.get(key)}`);
+        }).join(';');
+        const attrs = Array.from(vDom.attrs.keys()).filter(key => key !== 'ref' && vDom.attrs.get(key) !== false).map(k => {
+            const key = xssFilter.attrName(k);
+            const value = vDom.attrs.get(k);
+            return (value === true ? `${key}` : `${key}="${xssFilter.attrValue(`${value}`)}"`);
+        });
+        if (styles) {
+            attrs.push(`style="${styles}"`);
+        }
+        if (vDom.classes && vDom.classes.size) {
+            attrs.push(`class="${xssFilter.attrValue(Array.from(vDom.classes).join(' '))}"`);
+        }
+        let attrStr = attrs.join(' ');
+        attrStr = attrStr ? ' ' + attrStr : '';
+        if (this.singleTagTest.test(vDom.tagName)) {
+            return `<${vDom.tagName}${attrStr}>`;
+        }
+        const childHTML = vDom.children.map(child => {
+            return this.vDomToHTMLString(child);
+        }).join('');
+        return [
+            `<${vDom.tagName}${attrStr}>`,
+            childHTML,
+            `</${vDom.tagName}>`
+        ].join('');
+    }
+    replaceEmpty(s, target) {
+        return s.replace(/\s\s+/g, str => {
+            return ' ' + Array.from({
+                length: str.length - 1
+            }).fill(target).join('');
+        }).replace(/^\s|\s$/g, target);
+    }
+};
+exports.OutputTranslator.singleTags = 'br,img,hr'.split(',');
+exports.OutputTranslator.simpleXSSFilter = {
+    text(text) {
+        return text.replace(/[><&]/g, str => {
+            return {
+                '<': '&lt;',
+                '>': '&gt;',
+                '&': '&amp;'
+            }[str];
+        });
+    },
+    attrName(text) {
+        return text.replace(/[><"'&]/g, str => {
+            return {
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                '\'': '&#x27;',
+                '&': '&amp;'
+            }[str];
+        });
+    },
+    attrValue(text) {
+        return text.replace(/["']/g, str => {
+            return {
+                '"': '&quot;',
+                '\'': '&#x27;'
+            }[str];
+        });
+    }
+};
+exports.OutputTranslator = OutputTranslator_1 = __decorate([
+    di.Injectable()
 ], exports.OutputTranslator);
 
-/**
- * Textbus PC 端默认按键绑定
- */
-class DefaultShortcut {
-    setup(injector) {
-        const selection = injector.get(core.Selection);
-        const keyboard = injector.get(core.Keyboard);
-        const history = injector.get(core.History);
-        const commander = injector.get(core.Commander);
-        keyboard.addShortcut({
-            keymap: {
-                key: 'Enter'
-            },
-            action: () => {
-                commander.break();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'Enter',
-                shiftKey: true
-            },
-            action: () => {
-                const startOffset = selection.startOffset;
-                const startSlot = selection.startSlot;
-                const isToEnd = startOffset === startSlot.length || startSlot.isEmpty;
-                const content = isToEnd ? '\n\n' : '\n';
-                const isInserted = commander.insert(content);
-                if (isInserted && isToEnd) {
-                    selection.setPosition(startSlot, startOffset + 1);
-                }
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: ['Delete', 'Backspace']
-            },
-            action: (key) => {
-                commander.delete(key === 'Backspace');
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']
-            },
-            action: (key) => {
-                switch (key) {
-                    case 'ArrowLeft':
-                        selection.toPrevious();
-                        break;
-                    case 'ArrowRight':
-                        selection.toNext();
-                        break;
-                    case 'ArrowUp':
-                        selection.toPreviousLine();
-                        break;
-                    case 'ArrowDown':
-                        selection.toNextLine();
-                        break;
-                }
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'],
-                shiftKey: true
-            },
-            action: (key) => {
-                switch (key) {
-                    case 'ArrowLeft':
-                        selection.wrapToBefore();
-                        break;
-                    case 'ArrowRight':
-                        selection.wrapToAfter();
-                        break;
-                    case 'ArrowUp':
-                        selection.wrapToPreviousLine();
-                        break;
-                    case 'ArrowDown':
-                        selection.wrapToNextLine();
-                        break;
-                }
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'Tab'
-            },
-            action: () => {
-                commander.insert('    ');
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'a',
-                ctrlKey: true
-            },
-            action: () => {
-                selection.selectAll();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'c',
-                ctrlKey: true
-            },
-            action: () => {
-                commander.copy();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'x',
-                ctrlKey: true
-            },
-            action: () => {
-                commander.cut();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'z',
-                ctrlKey: true
-            },
-            action: () => {
-                history.back();
-            }
-        });
-        keyboard.addShortcut({
-            keymap: {
-                key: 'z',
-                ctrlKey: true,
-                shiftKey: true
-            },
-            action: () => {
-                history.forward();
-            }
-        });
-    }
+/**
+ * Textbus PC 端默认按键绑定
+ */
+class DefaultShortcut {
+    setup(injector) {
+        const selection = injector.get(core.Selection);
+        const keyboard = injector.get(core.Keyboard);
+        const history = injector.get(core.History);
+        const commander = injector.get(core.Commander);
+        keyboard.addShortcut({
+            keymap: {
+                key: 'Enter'
+            },
+            action: () => {
+                commander.break();
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: 'Enter',
+                shiftKey: true
+            },
+            action: () => {
+                const startOffset = selection.startOffset;
+                const startSlot = selection.startSlot;
+                const isToEnd = startOffset === startSlot.length || startSlot.isEmpty;
+                const content = isToEnd ? '\n\n' : '\n';
+                const isInserted = commander.insert(content);
+                if (isInserted && isToEnd) {
+                    selection.setPosition(startSlot, startOffset + 1);
+                }
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: ['Delete', 'Backspace']
+            },
+            action: (key) => {
+                commander.delete(key === 'Backspace');
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']
+            },
+            action: (key) => {
+                switch (key) {
+                    case 'ArrowLeft':
+                        selection.toPrevious();
+                        break;
+                    case 'ArrowRight':
+                        selection.toNext();
+                        break;
+                    case 'ArrowUp':
+                        selection.toPreviousLine();
+                        break;
+                    case 'ArrowDown':
+                        selection.toNextLine();
+                        break;
+                }
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'],
+                shiftKey: true
+            },
+            action: (key) => {
+                switch (key) {
+                    case 'ArrowLeft':
+                        selection.wrapToBefore();
+                        break;
+                    case 'ArrowRight':
+                        selection.wrapToAfter();
+                        break;
+                    case 'ArrowUp':
+                        selection.wrapToPreviousLine();
+                        break;
+                    case 'ArrowDown':
+                        selection.wrapToNextLine();
+                        break;
+                }
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: 'Tab'
+            },
+            action: () => {
+                commander.insert('    ');
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: 'a',
+                ctrlKey: true
+            },
+            action: () => {
+                selection.selectAll();
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: 'c',
+                ctrlKey: true
+            },
+            action: () => {
+                commander.copy();
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: 'x',
+                ctrlKey: true
+            },
+            action: () => {
+                commander.cut();
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: 'z',
+                ctrlKey: true
+            },
+            action: () => {
+                history.back();
+            }
+        });
+        keyboard.addShortcut({
+            keymap: {
+                key: 'z',
+                ctrlKey: true,
+                shiftKey: true
+            },
+            action: () => {
+                history.forward();
+            }
+        });
+    }
 }
 
-const editorError = core.makeError('CoreEditor');
-/**
- * Textbus PC 端编辑器
- */
-class Viewer extends core.Starter {
-    constructor(rootComponent, rootComponentLoader, options = {}) {
-        const id = 'textbus-' + Number((Math.random() + '').substring(2)).toString(16);
-        const { doc, mask, wrapper } = Viewer.createLayout(id, options.minHeight);
-        const staticProviders = [{
-                provide: EDITOR_OPTIONS,
-                useValue: options
-            }, {
-                provide: VIEW_CONTAINER,
-                useValue: wrapper
-            }, {
-                provide: VIEW_DOCUMENT,
-                useValue: doc
-            }, {
-                provide: VIEW_MASK,
-                useValue: mask
-            }, {
-                provide: core.NativeRenderer,
-                useClass: exports.DomRenderer
-            }, {
-                provide: core.NativeSelectionBridge,
-                useClass: exports.SelectionBridge
-            }, {
-                provide: Viewer,
-                useFactory: () => this
-            }];
-        super(Object.assign(Object.assign({}, options), { plugins: [() => new DefaultShortcut(), ...(options.plugins || [])], providers: [
-                ...(options.providers || []),
-                ...staticProviders,
-                exports.DomRenderer,
-                exports.Parser,
-                exports.Input,
-                exports.Caret,
-                exports.SelectionBridge,
-                exports.OutputTranslator,
-                exports.CollaborateCursor
-            ], setup: options.setup }));
-        this.rootComponent = rootComponent;
-        this.rootComponentLoader = rootComponentLoader;
-        this.options = options;
-        /** 编辑器是否已销毁 */
-        this.destroyed = false;
-        /** 编辑器是否已准备好 */
-        this.isReady = false;
-        this.changeEvent = new stream.Subject();
-        this.subs = [];
-        this._isFocus = false;
-        this.resourceNodes = [];
-        this.focusEvent = new stream.Subject();
-        this.blurEvent = new stream.Subject();
-        this.saveEvent = new stream.Subject();
-        this.styleSheet = '';
-        this.scripts = [];
-        this.links = [];
-        this.id = id;
-        this.workbench = wrapper;
-        this.onChange = this.changeEvent.asObservable();
-        this.onFocus = this.focusEvent.asObservable();
-        this.onBlur = this.blurEvent.asObservable();
-        this.onSave = this.saveEvent.asObservable();
-        this.controller = this.get(core.Controller);
-    }
-    get readonly() {
-        return this.controller.readonly;
-    }
-    set readonly(b) {
-        this.controller.readonly = b;
-    }
-    isFocus() {
-        return this._isFocus;
-    }
-    /**
-     * 初始化编辑器
-     * @param host 编辑器容器
-     */
-    mount(host) {
-        const _super = Object.create(null, {
-            mount: { get: () => super.mount }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.destroyed) {
-                throw editorError('the editor instance is destroyed!');
-            }
-            if (this.destroyed) {
-                return this;
-            }
-            const parser = this.get(exports.Parser);
-            const factory = this.get(core.Factory);
-            const doc = this.get(VIEW_DOCUMENT);
-            const keyboard = this.get(core.Keyboard);
-            keyboard.addShortcut({
-                keymap: {
-                    key: 's',
-                    ctrlKey: true
-                },
-                action: () => {
-                    this.saveEvent.next();
-                }
-            });
-            let component;
-            const content = this.options.content;
-            if (content) {
-                if (typeof content === 'string') {
-                    component = parser.parseDoc(content, this.rootComponentLoader);
-                }
-                else {
-                    component = factory.createComponentByFactory(content, this.rootComponent);
-                }
-            }
-            else {
-                component = this.rootComponent.createInstance(this);
-            }
-            this.initDocStyleSheetsAndScripts(this.options);
-            host.appendChild(this.workbench);
-            yield _super.mount.call(this, doc, component);
-            const renderer = this.get(core.Renderer);
-            const caret = this.get(exports.Caret);
-            this.subs.push(renderer.onViewUpdated.subscribe(() => {
-                this.changeEvent.next();
-            }), caret.onPositionChange.pipe(stream.map(p => !!p), stream.distinctUntilChanged()).subscribe(b => {
-                if (b) {
-                    this._isFocus = true;
-                    this.focusEvent.next();
-                }
-                else {
-                    this._isFocus = false;
-                    this.blurEvent.next();
-                }
-            }));
-            this.get(exports.Input);
-            this.isReady = true;
-            if (this.options.autoFocus) {
-                this.get(exports.Input).onReady.then(() => {
-                    this.focus();
-                });
-            }
-            return this;
-        });
-    }
-    /**
-     * 获取焦点
-     */
-    focus() {
-        this.guardReady();
-        const selection = this.get(core.Selection);
-        const rootComponentRef = this.get(core.RootComponentRef);
-        if (selection.commonAncestorSlot) {
-            selection.restore();
-            return;
-        }
-        const location = selection.findFirstPosition(rootComponentRef.component.slots.get(0));
-        selection.setPosition(location.slot, location.offset);
-        selection.restore();
-    }
-    /**
-     * 取消编辑器焦点
-     */
-    blur() {
-        if (this.isReady) {
-            const selection = this.get(core.Selection);
-            selection.unSelect();
-            selection.restore();
-        }
-    }
-    /**
-     * 获取编辑器所有资源
-     */
-    getResources() {
-        var _a;
-        return {
-            styleSheets: ((_a = this.options) === null || _a === void 0 ? void 0 : _a.styleSheets) || [],
-            styleSheet: this.styleSheet,
-            links: this.links,
-            scripts: this.scripts
-        };
-    }
-    /**
-     * 获取 HTML 格式的内容
-     */
-    getContent() {
-        this.guardReady();
-        const outputRenderer = this.get(core.OutputRenderer);
-        const outputTranslator = this.get(exports.OutputTranslator);
-        const vDom = outputRenderer.render();
-        return outputTranslator.transform(vDom);
-    }
-    /**
-     * 获取 JSON 格式的内容
-     */
-    getJSON() {
-        this.guardReady();
-        const rootComponentRef = this.get(core.RootComponentRef);
-        return rootComponentRef.component.toJSON();
-    }
-    /**
-     * 销毁编辑器
-     */
-    destroy() {
-        var _a;
-        if (this.destroyed) {
-            return;
-        }
-        this.destroyed = true;
-        this.subs.forEach(i => i.unsubscribe());
-        const types = [
-            exports.Input,
-        ];
-        types.forEach(i => {
-            this.get(i).destroy();
-        });
-        super.destroy();
-        (_a = this.workbench.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.workbench);
-        this.resourceNodes.forEach(node => {
-            var _a;
-            (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-        });
-    }
-    /**
-     * 替换编辑的内容
-     * @param content
-     */
-    replaceContent(content) {
-        this.guardReady();
-        const parser = this.get(exports.Parser);
-        const factory = this.get(core.Factory);
-        const rootComponentRef = this.get(core.RootComponentRef);
-        const selection = this.get(core.Selection);
-        const rootComponentLoader = this.rootComponentLoader;
-        let component;
-        if (typeof content === 'string') {
-            component = parser.parseDoc(content, rootComponentLoader);
-        }
-        else {
-            component = factory.createComponentByFactory(content, this.rootComponent);
-        }
-        selection.unSelect();
-        rootComponentRef.component.slots.clean();
-        rootComponentRef.component.slots.push(...component.slots.toArray());
-        core.invokeListener(component, 'onDestroy');
-    }
-    guardReady() {
-        if (this.destroyed) {
-            throw editorError('the editor instance is destroyed!');
-        }
-        if (!this.isReady) {
-            throw editorError('please wait for the editor to initialize before getting the content!');
-        }
-    }
-    initDocStyleSheetsAndScripts(options) {
-        var _a;
-        const loaders = [];
-        (_a = options.imports) === null || _a === void 0 ? void 0 : _a.forEach(module => {
-            loaders.push(...(module.componentLoaders || []));
-        });
-        loaders.push(...(options.componentLoaders || []));
-        const resources = loaders.filter(i => i.resources).map(i => i.resources);
-        const docStyles = [];
-        const editModeStyles = [];
-        resources.forEach(metadata => {
-            var _a, _b;
-            if (Array.isArray(metadata.links)) {
-                this.links.push(...metadata.links);
-            }
-            docStyles.push(((_a = metadata.styles) === null || _a === void 0 ? void 0 : _a.join('')) || '');
-            editModeStyles.push(((_b = metadata.editModeStyles) === null || _b === void 0 ? void 0 : _b.join('')) || '');
-        });
-        this.links.forEach(link => {
-            const linkEle = document.createElement('link');
-            Object.assign(linkEle, link);
-            this.resourceNodes.push(linkEle);
-            document.head.appendChild(linkEle);
-        });
-        const styleEl = document.createElement('style');
-        docStyles.push(...(options.styleSheets || []));
-        editModeStyles.push(`#${this.id} *::selection{background-color: rgba(18, 150, 219, .2); color:inherit}`, ...(options.editingStyleSheets || []));
-        this.styleSheet = Viewer.cssMin(docStyles.join(''));
-        styleEl.innerHTML = this.styleSheet + Viewer.cssMin(editModeStyles.join(''));
-        this.resourceNodes.push(styleEl);
-        document.head.append(styleEl);
-        resources.filter(i => { var _a; return (_a = i.scripts) === null || _a === void 0 ? void 0 : _a.length; }).map(i => i.scripts).flat().forEach(src => {
-            if (src) {
-                const script = document.createElement('script');
-                script.src = src;
-                this.scripts.push(src);
-                document.head.appendChild(script);
-                this.resourceNodes.push(script);
-            }
-        });
-    }
-    static createLayout(id, minHeight = '100%') {
-        const doc = createElement('div', {
-            styles: {
-                cursor: 'text',
-                wordBreak: 'break-all',
-                boxSizing: 'border-box',
-                minHeight,
-                flex: 1
-            },
-            attrs: {
-                'data-textbus-view': VIEW_DOCUMENT,
-            },
-            props: {
-                id
-            }
-        });
-        const mask = createElement('div', {
-            attrs: {
-                'data-textbus-view': VIEW_MASK,
-            },
-            styles: {
-                position: 'absolute',
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-                zIndex: 1,
-                pointerEvents: 'none',
-                overflow: 'hidden'
-            }
-        });
-        const wrapper = createElement('div', {
-            attrs: {
-                'data-textbus-view': VIEW_CONTAINER,
-            },
-            styles: {
-                display: 'flex',
-                minHeight: '100%',
-                position: 'relative',
-                flexDirection: 'column'
-            },
-            children: [doc, mask]
-        });
-        return {
-            wrapper,
-            doc,
-            mask
-        };
-    }
-    static cssMin(str) {
-        return str
-            .replace(/\s*(?=[>{}:;,[])/g, '')
-            .replace(/([>{}:;,])\s*/g, '$1')
-            .replace(/;}/g, '}').replace(/\s+/, ' ').trim();
-    }
+const editorError = core.makeError('CoreEditor');
+/**
+ * Textbus PC 端编辑器
+ */
+class Viewer extends core.Starter {
+    constructor(rootComponent, rootComponentLoader, options = {}) {
+        const id = 'textbus-' + Number((Math.random() + '').substring(2)).toString(16);
+        const { doc, mask, wrapper } = Viewer.createLayout(id, options.minHeight);
+        const staticProviders = [{
+                provide: EDITOR_OPTIONS,
+                useValue: options
+            }, {
+                provide: VIEW_CONTAINER,
+                useValue: wrapper
+            }, {
+                provide: VIEW_DOCUMENT,
+                useValue: doc
+            }, {
+                provide: VIEW_MASK,
+                useValue: mask
+            }, {
+                provide: core.NativeRenderer,
+                useClass: exports.DomRenderer
+            }, {
+                provide: core.NativeSelectionBridge,
+                useClass: exports.SelectionBridge
+            }, {
+                provide: Viewer,
+                useFactory: () => this
+            }];
+        super(Object.assign(Object.assign({}, options), { plugins: [() => new DefaultShortcut(), ...(options.plugins || [])], providers: [
+                ...(options.providers || []),
+                ...staticProviders,
+                exports.DomRenderer,
+                exports.Parser,
+                exports.Input,
+                exports.Caret,
+                exports.SelectionBridge,
+                exports.OutputTranslator,
+                exports.CollaborateCursor
+            ], setup: options.setup }));
+        this.rootComponent = rootComponent;
+        this.rootComponentLoader = rootComponentLoader;
+        this.options = options;
+        /** 编辑器是否已销毁 */
+        this.destroyed = false;
+        /** 编辑器是否已准备好 */
+        this.isReady = false;
+        this.changeEvent = new stream.Subject();
+        this.subs = [];
+        this._isFocus = false;
+        this.resourceNodes = [];
+        this.focusEvent = new stream.Subject();
+        this.blurEvent = new stream.Subject();
+        this.saveEvent = new stream.Subject();
+        this.styleSheet = '';
+        this.scripts = [];
+        this.links = [];
+        this.id = id;
+        this.workbench = wrapper;
+        this.onChange = this.changeEvent.asObservable();
+        this.onFocus = this.focusEvent.asObservable();
+        this.onBlur = this.blurEvent.asObservable();
+        this.onSave = this.saveEvent.asObservable();
+        this.controller = this.get(core.Controller);
+    }
+    get readonly() {
+        return this.controller.readonly;
+    }
+    set readonly(b) {
+        this.controller.readonly = b;
+    }
+    isFocus() {
+        return this._isFocus;
+    }
+    /**
+     * 初始化编辑器
+     * @param host 编辑器容器
+     */
+    mount(host) {
+        const _super = Object.create(null, {
+            mount: { get: () => super.mount }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.destroyed) {
+                throw editorError('the editor instance is destroyed!');
+            }
+            if (this.destroyed) {
+                return this;
+            }
+            const parser = this.get(exports.Parser);
+            const factory = this.get(core.Factory);
+            const doc = this.get(VIEW_DOCUMENT);
+            const keyboard = this.get(core.Keyboard);
+            keyboard.addShortcut({
+                keymap: {
+                    key: 's',
+                    ctrlKey: true
+                },
+                action: () => {
+                    this.saveEvent.next();
+                }
+            });
+            let component;
+            const content = this.options.content;
+            if (content) {
+                if (typeof content === 'string') {
+                    component = parser.parseDoc(content, this.rootComponentLoader);
+                }
+                else {
+                    component = factory.createComponentByFactory(content, this.rootComponent);
+                }
+            }
+            else {
+                component = this.rootComponent.createInstance(this);
+            }
+            this.initDocStyleSheetsAndScripts(this.options);
+            host.appendChild(this.workbench);
+            yield _super.mount.call(this, doc, component);
+            const renderer = this.get(core.Renderer);
+            const caret = this.get(exports.Caret);
+            this.subs.push(renderer.onViewUpdated.subscribe(() => {
+                this.changeEvent.next();
+            }), caret.onPositionChange.pipe(stream.map(p => !!p), stream.distinctUntilChanged()).subscribe(b => {
+                if (b) {
+                    this._isFocus = true;
+                    this.focusEvent.next();
+                }
+                else {
+                    this._isFocus = false;
+                    this.blurEvent.next();
+                }
+            }));
+            this.get(exports.Input);
+            this.isReady = true;
+            if (this.options.autoFocus) {
+                this.get(exports.Input).onReady.then(() => {
+                    this.focus();
+                });
+            }
+            return this;
+        });
+    }
+    /**
+     * 获取焦点
+     */
+    focus() {
+        this.guardReady();
+        const selection = this.get(core.Selection);
+        const rootComponentRef = this.get(core.RootComponentRef);
+        if (selection.commonAncestorSlot) {
+            selection.restore();
+            return;
+        }
+        const location = selection.findFirstPosition(rootComponentRef.component.slots.get(0));
+        selection.setPosition(location.slot, location.offset);
+        selection.restore();
+    }
+    /**
+     * 取消编辑器焦点
+     */
+    blur() {
+        if (this.isReady) {
+            const selection = this.get(core.Selection);
+            selection.unSelect();
+            selection.restore();
+        }
+    }
+    /**
+     * 获取编辑器所有资源
+     */
+    getResources() {
+        var _a;
+        return {
+            styleSheets: ((_a = this.options) === null || _a === void 0 ? void 0 : _a.styleSheets) || [],
+            styleSheet: this.styleSheet,
+            links: this.links,
+            scripts: this.scripts
+        };
+    }
+    /**
+     * 获取 HTML 格式的内容
+     */
+    getContent() {
+        this.guardReady();
+        const outputRenderer = this.get(core.OutputRenderer);
+        const outputTranslator = this.get(exports.OutputTranslator);
+        const vDom = outputRenderer.render();
+        return outputTranslator.transform(vDom);
+    }
+    /**
+     * 获取 JSON 格式的内容
+     */
+    getJSON() {
+        this.guardReady();
+        const rootComponentRef = this.get(core.RootComponentRef);
+        return rootComponentRef.component.toJSON();
+    }
+    /**
+     * 销毁编辑器
+     */
+    destroy() {
+        var _a;
+        if (this.destroyed) {
+            return;
+        }
+        this.destroyed = true;
+        this.subs.forEach(i => i.unsubscribe());
+        const types = [
+            exports.Input,
+        ];
+        types.forEach(i => {
+            this.get(i).destroy();
+        });
+        super.destroy();
+        (_a = this.workbench.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.workbench);
+        this.resourceNodes.forEach(node => {
+            var _a;
+            (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+        });
+    }
+    /**
+     * 替换编辑的内容
+     * @param content
+     */
+    replaceContent(content) {
+        this.guardReady();
+        const parser = this.get(exports.Parser);
+        const factory = this.get(core.Factory);
+        const rootComponentRef = this.get(core.RootComponentRef);
+        const selection = this.get(core.Selection);
+        const rootComponentLoader = this.rootComponentLoader;
+        let component;
+        if (typeof content === 'string') {
+            component = parser.parseDoc(content, rootComponentLoader);
+        }
+        else {
+            component = factory.createComponentByFactory(content, this.rootComponent);
+        }
+        selection.unSelect();
+        rootComponentRef.component.slots.clean();
+        rootComponentRef.component.slots.push(...component.slots.toArray());
+        core.invokeListener(component, 'onDestroy');
+    }
+    guardReady() {
+        if (this.destroyed) {
+            throw editorError('the editor instance is destroyed!');
+        }
+        if (!this.isReady) {
+            throw editorError('please wait for the editor to initialize before getting the content!');
+        }
+    }
+    initDocStyleSheetsAndScripts(options) {
+        var _a;
+        const loaders = [];
+        (_a = options.imports) === null || _a === void 0 ? void 0 : _a.forEach(module => {
+            loaders.push(...(module.componentLoaders || []));
+        });
+        loaders.push(...(options.componentLoaders || []));
+        const resources = loaders.filter(i => i.resources).map(i => i.resources);
+        const docStyles = [];
+        const editModeStyles = [];
+        resources.forEach(metadata => {
+            var _a, _b;
+            if (Array.isArray(metadata.links)) {
+                this.links.push(...metadata.links);
+            }
+            docStyles.push(((_a = metadata.styles) === null || _a === void 0 ? void 0 : _a.join('')) || '');
+            editModeStyles.push(((_b = metadata.editModeStyles) === null || _b === void 0 ? void 0 : _b.join('')) || '');
+        });
+        this.links.forEach(link => {
+            const linkEle = document.createElement('link');
+            Object.assign(linkEle, link);
+            this.resourceNodes.push(linkEle);
+            document.head.appendChild(linkEle);
+        });
+        const styleEl = document.createElement('style');
+        docStyles.push(...(options.styleSheets || []));
+        editModeStyles.push(`#${this.id} *::selection{background-color: rgba(18, 150, 219, .2); color:inherit}`, ...(options.editingStyleSheets || []));
+        this.styleSheet = Viewer.cssMin(docStyles.join(''));
+        styleEl.innerHTML = this.styleSheet + Viewer.cssMin(editModeStyles.join(''));
+        this.resourceNodes.push(styleEl);
+        document.head.append(styleEl);
+        resources.filter(i => { var _a; return (_a = i.scripts) === null || _a === void 0 ? void 0 : _a.length; }).map(i => i.scripts).flat().forEach(src => {
+            if (src) {
+                const script = document.createElement('script');
+                script.src = src;
+                this.scripts.push(src);
+                document.head.appendChild(script);
+                this.resourceNodes.push(script);
+            }
+        });
+    }
+    static createLayout(id, minHeight = '100%') {
+        const doc = createElement('div', {
+            styles: {
+                cursor: 'text',
+                wordBreak: 'break-all',
+                boxSizing: 'border-box',
+                minHeight,
+                flex: 1
+            },
+            attrs: {
+                'data-textbus-view': VIEW_DOCUMENT,
+            },
+            props: {
+                id
+            }
+        });
+        const mask = createElement('div', {
+            attrs: {
+                'data-textbus-view': VIEW_MASK,
+            },
+            styles: {
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                zIndex: 1,
+                pointerEvents: 'none',
+                overflow: 'hidden'
+            }
+        });
+        const wrapper = createElement('div', {
+            attrs: {
+                'data-textbus-view': VIEW_CONTAINER,
+            },
+            styles: {
+                display: 'flex',
+                minHeight: '100%',
+                position: 'relative',
+                flexDirection: 'column'
+            },
+            children: [doc, mask]
+        });
+        return {
+            wrapper,
+            doc,
+            mask
+        };
+    }
+    static cssMin(str) {
+        return str
+            .replace(/\s*(?=[>{}:;,[])/g, '')
+            .replace(/([>{}:;,])\s*/g, '$1')
+            .replace(/;}/g, '}').replace(/\s+/, ' ').trim();
+    }
 }
 
 exports.CollaborateSelectionAwarenessDelegate = CollaborateSelectionAwarenessDelegate;