@textbus/platform-browser 3.0.0-alpha.20

package/bundles/index.js

@@ -0,0 +1,2378 @@
+'use strict';
+
+require('reflect-metadata');
+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);
+}
+
+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);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __param(paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+/**
+ * 编辑器可选项依赖注入 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])
+], 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])
+], 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])
+], 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])
+], 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])
+], 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()
+], 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()
+], 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();
+            }
+        });
+    }
+}
+
+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;
+exports.DefaultShortcut = DefaultShortcut;
+exports.EDITOR_OPTIONS = EDITOR_OPTIONS;
+exports.VIEW_CONTAINER = VIEW_CONTAINER;
+exports.VIEW_DOCUMENT = VIEW_DOCUMENT;
+exports.VIEW_MASK = VIEW_MASK;
+exports.Viewer = Viewer;
+exports.createElement = createElement;
+exports.createTextNode = createTextNode;
+exports.getLayoutRectByRange = getLayoutRectByRange;
+exports.isMac = isMac;
+exports.isSafari = isSafari;
+exports.isWindows = isWindows;