@textbus/platform-browser 4.0.0-alpha.31 → 4.0.0-alpha.33

package/bundles/collaborate-cursor.d.ts

@@ -36,6 +36,7 @@ export declare class CollaborateCursor {
     private subscription;
     private currentSelection;
     private container;
+    private ratio;
     constructor(textbus: Textbus, nativeSelection: SelectionBridge, scheduler: Scheduler, selection: Selection, userActivity: UserActivity, awarenessDelegate?: CollaborateSelectionAwarenessDelegate | undefined);
     init(): void;
     /**

package/bundles/dom-adapter.d.ts

@@ -1,10 +1,18 @@
 import { Component, Slot, ViewAdapter, NodeLocation, VElement, VTextNode, Textbus } from '@textbus/core';
+export interface CompositionState {
+    slot: Slot;
+    text: string;
+    offset: number;
+    index: number;
+}
 /**
  * Textbus PC 端浏览器渲染能力桥接器抽象类，提供了 DOM 元素查询能力，具体渲染能力由各前端框架实现相应桥接
  */
 export declare abstract class DomAdapter<ViewComponent, ViewElement> extends ViewAdapter {
     private mount;
     host: HTMLElement;
+    compositionNode: HTMLElement | null;
+    composition: CompositionState | null;
     protected firstRending: boolean;
     protected componentRootElementCaches: {
         set: {
@@ -64,4 +72,5 @@ export declare abstract class DomAdapter<ViewComponent, ViewElement> extends Vie
      * @param node
      */
     getLocationByNativeNode(node: Node): NodeLocation | null;
+    protected insertCompositionByIndex(slot: Slot, vNode: VElement, composition: CompositionState, createCompositionNode: (composition: CompositionState) => VElement): void;
 }

package/bundles/index.esm.js

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import { Slot, Textbus, ViewAdapter, createBidirectionalMapping, Component, VElement, VTextNode, Controller, Selection, RootComponentRef, ContentType, Event, invokeListener, Keyboard, Commander, Scheduler, makeError, NativeSelectionBridge, FocusManager, Registry } from '@textbus/core';
+import { Slot, Textbus, ViewAdapter, createBidirectionalMapping, Component, VTextNode, VElement, Controller, Selection, RootComponentRef, ContentType, Event, invokeListener, Keyboard, Commander, Scheduler, makeError, NativeSelectionBridge, FocusManager, Registry } from '@textbus/core';
 import { Subject, filter, fromEvent, Subscription, distinctUntilChanged, merge, map, Observable } from '@tanbo/stream';
 import { InjectionToken, Injectable, Inject, Optional } from '@viewfly/core';
 import { UserActivity } from '@textbus/collaborate';
@@ -323,6 +323,8 @@ class DomAdapter extends ViewAdapter {
                 id: 'textbus-' + Number((Math.random() + '').substring(2)).toString(16)
             }
         });
+        this.compositionNode = null;
+        this.composition = null;
         this.firstRending = true;
         this.componentRootElementCaches = createBidirectionalMapping(a => {
             return a instanceof Component;
@@ -396,6 +398,70 @@ class DomAdapter extends ViewAdapter {
         const rootVNode = this.slotRootVElementCaches.get(slot);
         return getLocation(node, slotRootNode, rootVNode);
     }
+    insertCompositionByIndex(slot, vNode, composition, createCompositionNode) {
+        const location = vNode.location;
+        const nodes = vNode.children;
+        if (location && location.slot === composition.slot) {
+            for (let i = 0; i < nodes.length; i++) {
+                const child = nodes[i];
+                if (child instanceof VTextNode) {
+                    const childLocation = child.location;
+                    if (childLocation) {
+                        if (composition.index > childLocation.startIndex && composition.index <= childLocation.endIndex) {
+                            const compositionNode = createCompositionNode(composition);
+                            if (composition.index === childLocation.endIndex) {
+                                nodes.splice(i + 1, 0, compositionNode);
+                                break;
+                            }
+                            const splitIndex = composition.index - childLocation.startIndex;
+                            const beforeNode = new VTextNode(child.textContent.slice(0, splitIndex));
+                            beforeNode.location = {
+                                slot: childLocation.slot,
+                                startIndex: childLocation.startIndex,
+                                endIndex: childLocation.startIndex + splitIndex
+                            };
+                            const afterNode = new VTextNode(child.textContent.slice(splitIndex));
+                            afterNode.location = {
+                                slot: childLocation.slot,
+                                startIndex: composition.index,
+                                endIndex: childLocation.endIndex
+                            };
+                            nodes.splice(i, 1, beforeNode, compositionNode, afterNode);
+                            break;
+                        }
+                        else if (composition.index === 0 && childLocation.startIndex === 0) {
+                            nodes.unshift(createCompositionNode(composition));
+                            break;
+                        }
+                    }
+                }
+                else if (child instanceof Component) {
+                    const componentIndex = slot.indexOf(child);
+                    if (composition.index === componentIndex + 1) {
+                        nodes.splice(i + 1, 0, createCompositionNode(composition));
+                        break;
+                    }
+                    else if (componentIndex === 0 && composition.index === 0) {
+                        nodes.unshift(createCompositionNode(composition));
+                        break;
+                    }
+                }
+                else if (child.tagName === 'br') {
+                    const location = child.location;
+                    if (location) {
+                        if (location.endIndex === composition.index) {
+                            nodes.splice(i + 1, 0, createCompositionNode(composition));
+                            break;
+                        }
+                        else if (location.startIndex === 0 && composition.index === 0) {
+                            nodes.unshift(createCompositionNode(composition));
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 function getNodes(adapter, vElement, nativeNode, result) {
     if (vElement.location) {
@@ -1032,15 +1098,10 @@ class ExperimentalCaret {
     get display() {
         return this._display;
     }
-    constructor(scheduler, editorMask) {
+    constructor(adapter, scheduler, editorMask) {
+        this.adapter = adapter;
         this.scheduler = scheduler;
         this.editorMask = editorMask;
-        this.compositionState = null;
-        this.compositionElement = createElement('span', {
-            styles: {
-                textDecoration: 'underline'
-            }
-        });
         this.timer = null;
         this.oldPosition = null;
         this._display = true;
@@ -1184,12 +1245,11 @@ class ExperimentalCaret {
             this.positionChangeEvent.next(null);
             return;
         }
-        if (this.compositionState) {
-            const compositionElement = this.compositionElement;
-            compositionElement.innerText = this.compositionState.data;
+        const compositionNode = this.adapter.compositionNode;
+        if (compositionNode) {
             nativeRange = nativeRange.cloneRange();
-            nativeRange.insertNode(compositionElement);
-            nativeRange.selectNodeContents(compositionElement);
+            nativeRange.insertNode(compositionNode);
+            nativeRange.selectNodeContents(compositionNode);
             nativeRange.collapse();
         }
         const rect = getLayoutRectByRange(nativeRange);
@@ -1250,8 +1310,9 @@ let MagicInput = class MagicInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(parser, keyboard, commander, selection, controller, scheduler, textbus) {
+    constructor(adapter, parser, keyboard, commander, selection, controller, scheduler, textbus) {
         super();
+        this.adapter = adapter;
         this.parser = parser;
         this.keyboard = keyboard;
         this.commander = commander;
@@ -1260,8 +1321,7 @@ let MagicInput = class MagicInput extends Input {
         this.scheduler = scheduler;
         this.textbus = textbus;
         this.composition = false;
-        this.compositionState = null;
-        this.caret = new ExperimentalCaret(this.scheduler, this.textbus.get(VIEW_MASK));
+        this.caret = new ExperimentalCaret(this.adapter, this.scheduler, this.textbus.get(VIEW_MASK));
         this.isSafari = isSafari();
         this.isFirefox = isFirefox();
         this.isMac = isMac();
@@ -1301,13 +1361,8 @@ let MagicInput = class MagicInput extends Input {
         if (!this.isFocus) {
             (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.focus();
             setTimeout(() => {
-                var _a, _b, _c;
                 if (!this.nativeFocus && this.isFocus) {
-                    this.subscription.unsubscribe();
-                    (_b = (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.textarea);
-                    this.subscription = new Subscription();
-                    this.init();
-                    (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
+                    this.reInit();
                 }
             });
         }
@@ -1323,6 +1378,22 @@ let MagicInput = class MagicInput extends Input {
         this.caret.destroy();
         this.subscription.unsubscribe();
     }
+    reInit(delay = false) {
+        var _a, _b, _c;
+        this.subscription.unsubscribe();
+        (_b = (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.textarea);
+        this.subscription = new Subscription();
+        this.init();
+        if (delay) {
+            setTimeout(() => {
+                var _a;
+                (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        else {
+            (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    }
     init() {
         const doc = this.doc;
         const contentBody = doc.body;
@@ -1331,9 +1402,19 @@ let MagicInput = class MagicInput extends Input {
         contentBody.appendChild(textarea);
         this.textarea = textarea;
         this.subscription.add(fromEvent(textarea, 'blur').subscribe(() => {
+            // if (this.isFocus) {
+            //   this.isFocus = false
+            //   this.reInit(true)
+            // }
             this.isFocus = false;
             this.nativeFocus = false;
             this.caret.hide();
+            if (this.adapter.composition) {
+                const slot = this.adapter.composition.slot;
+                this.adapter.composition = null;
+                this.adapter.compositionNode = null;
+                slot.changeMarker.forceMarkDirtied();
+            }
         }), fromEvent(textarea, 'focus').subscribe(() => {
             this.nativeFocus = true;
         }), this.caret.onStyleChange.subscribe(style => {
@@ -1456,7 +1537,6 @@ let MagicInput = class MagicInput extends Input {
                 this.commander.delete();
             }
             this.composition = true;
-            this.caret.compositionState = this.compositionState = null;
             startIndex = this.selection.startOffset;
             const startSlot = this.selection.startSlot;
             const event = new Event(startSlot, {
@@ -1473,10 +1553,11 @@ let MagicInput = class MagicInput extends Input {
                 return;
             }
             const startSlot = this.selection.startSlot;
-            this.caret.compositionState = this.compositionState = {
+            this.adapter.composition = {
                 slot: startSlot,
-                index: startIndex,
-                data: ev.data
+                text: ev.data,
+                offset: ev.data.length,
+                index: startIndex
             };
             this.caret.refresh(true);
             const event = new Event(startSlot, {
@@ -1484,6 +1565,7 @@ let MagicInput = class MagicInput extends Input {
                 data: ev.data
             });
             invokeListener(startSlot.parent, 'onCompositionUpdate', event);
+            startSlot.changeMarker.forceMarkDirtied();
         }));
         let isCompositionEnd = false;
         this.subscription.add(merge(fromEvent(textarea, 'beforeinput').pipe(filter(ev => {
@@ -1507,24 +1589,15 @@ let MagicInput = class MagicInput extends Input {
             textarea.value = '';
             return ev.data;
         }))).subscribe(text => {
+            var _a;
             this.composition = false;
-            this.caret.compositionState = this.compositionState = null;
-            const compositionElement = this.caret.compositionElement;
-            let nextSibling = compositionElement.nextSibling;
-            while (nextSibling) {
-                if (!nextSibling.textContent) {
-                    const next = nextSibling.nextSibling;
-                    nextSibling.remove();
-                    nextSibling = next;
-                    continue;
-                }
-                nextSibling.remove();
-                break;
-            }
-            compositionElement.remove();
+            this.adapter.composition = null;
             if (text) {
                 this.commander.write(text);
             }
+            else {
+                (_a = this.selection.startSlot) === null || _a === void 0 ? void 0 : _a.changeMarker.forceMarkDirtied();
+            }
             if (isCompositionEnd) {
                 const startSlot = this.selection.startSlot;
                 if (startSlot) {
@@ -1553,7 +1626,8 @@ let MagicInput = class MagicInput extends Input {
 };
 MagicInput = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [Parser,
+    __metadata("design:paramtypes", [DomAdapter,
+        Parser,
         Keyboard,
         Commander,
         Selection,
@@ -1625,6 +1699,7 @@ let CollaborateCursor = class CollaborateCursor {
         this.onRectsChange = new Subject();
         this.subscription = new Subscription();
         this.currentSelection = [];
+        this.ratio = window.devicePixelRatio || 1;
         this.container = textbus.get(VIEW_CONTAINER);
         this.canvasContainer.append(this.canvas);
         this.host.append(this.canvasContainer, this.tooltips);
@@ -1668,8 +1743,9 @@ let CollaborateCursor = class CollaborateCursor {
         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.canvas.width = this.canvas.offsetWidth * this.ratio;
+        this.canvas.height = this.canvas.offsetHeight * this.ratio;
+        this.context.scale(this.ratio, this.ratio);
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
         const users = [];
         paths.filter(i => {
@@ -1694,8 +1770,13 @@ let CollaborateCursor = class CollaborateCursor {
                 return;
             }
             const nativeRange = document.createRange();
-            nativeRange.setStart(anchor.node, anchor.offset);
-            nativeRange.setEnd(focus.node, focus.offset);
+            try {
+                nativeRange.setStart(anchor.node, anchor.offset);
+                nativeRange.setEnd(focus.node, focus.offset);
+            }
+            catch (e) {
+                return;
+            }
             if ((anchor.node !== focus.node || anchor.offset !== focus.offset) && nativeRange.collapsed) {
                 nativeRange.setStart(focus.node, focus.offset);
                 nativeRange.setEnd(anchor.node, anchor.offset);
@@ -1958,7 +2039,7 @@ let NativeInput = class NativeInput extends Input {
         this.controller = controller;
         this.caret = new NativeCaret(this.scheduler);
         this.composition = false;
-        this.compositionState = null;
+        // compositionState: CompositionState | null = null
         this.onReady = Promise.resolve();
         this._disabled = false;
         this.nativeSelection = document.getSelection();
@@ -2116,7 +2197,6 @@ let NativeInput = class NativeInput extends Input {
         let startIndex;
         const compositionStart = () => {
             this.composition = true;
-            this.compositionState = null;
             startIndex = this.selection.startOffset;
             const startSlot = this.selection.startSlot;
             const event = new Event(startSlot, {
@@ -2126,11 +2206,6 @@ let NativeInput = class NativeInput extends Input {
         };
         const compositionUpdate = (data) => {
             const startSlot = this.selection.startSlot;
-            this.compositionState = {
-                slot: startSlot,
-                index: startIndex,
-                data
-            };
             const event = new Event(startSlot, {
                 index: startIndex,
                 data
@@ -2217,7 +2292,6 @@ let NativeInput = class NativeInput extends Input {
             return !this.ignoreComposition;
         })).subscribe(() => {
             this.composition = true;
-            this.compositionState = null;
             startIndex = this.selection.startOffset;
             const startSlot = this.selection.startSlot;
             const event = new Event(startSlot, {
@@ -2228,11 +2302,6 @@ let NativeInput = class NativeInput extends Input {
             return !this.ignoreComposition;
         })).subscribe(ev => {
             const startSlot = this.selection.startSlot;
-            this.compositionState = {
-                slot: startSlot,
-                index: startIndex,
-                data: ev.data
-            };
             const event = new Event(startSlot, {
                 index: startIndex,
                 data: ev.data
@@ -2282,7 +2351,6 @@ let NativeInput = class NativeInput extends Input {
                 return !b;
             }))).subscribe(text => {
             this.composition = false;
-            this.compositionState = null;
             if (text) {
                 this.commander.write(text);
             }

package/bundles/index.js

@@ -325,6 +325,8 @@ class DomAdapter extends core$1.ViewAdapter {
                 id: 'textbus-' + Number((Math.random() + '').substring(2)).toString(16)
             }
         });
+        this.compositionNode = null;
+        this.composition = null;
         this.firstRending = true;
         this.componentRootElementCaches = core$1.createBidirectionalMapping(a => {
             return a instanceof core$1.Component;
@@ -398,6 +400,70 @@ class DomAdapter extends core$1.ViewAdapter {
         const rootVNode = this.slotRootVElementCaches.get(slot);
         return getLocation(node, slotRootNode, rootVNode);
     }
+    insertCompositionByIndex(slot, vNode, composition, createCompositionNode) {
+        const location = vNode.location;
+        const nodes = vNode.children;
+        if (location && location.slot === composition.slot) {
+            for (let i = 0; i < nodes.length; i++) {
+                const child = nodes[i];
+                if (child instanceof core$1.VTextNode) {
+                    const childLocation = child.location;
+                    if (childLocation) {
+                        if (composition.index > childLocation.startIndex && composition.index <= childLocation.endIndex) {
+                            const compositionNode = createCompositionNode(composition);
+                            if (composition.index === childLocation.endIndex) {
+                                nodes.splice(i + 1, 0, compositionNode);
+                                break;
+                            }
+                            const splitIndex = composition.index - childLocation.startIndex;
+                            const beforeNode = new core$1.VTextNode(child.textContent.slice(0, splitIndex));
+                            beforeNode.location = {
+                                slot: childLocation.slot,
+                                startIndex: childLocation.startIndex,
+                                endIndex: childLocation.startIndex + splitIndex
+                            };
+                            const afterNode = new core$1.VTextNode(child.textContent.slice(splitIndex));
+                            afterNode.location = {
+                                slot: childLocation.slot,
+                                startIndex: composition.index,
+                                endIndex: childLocation.endIndex
+                            };
+                            nodes.splice(i, 1, beforeNode, compositionNode, afterNode);
+                            break;
+                        }
+                        else if (composition.index === 0 && childLocation.startIndex === 0) {
+                            nodes.unshift(createCompositionNode(composition));
+                            break;
+                        }
+                    }
+                }
+                else if (child instanceof core$1.Component) {
+                    const componentIndex = slot.indexOf(child);
+                    if (composition.index === componentIndex + 1) {
+                        nodes.splice(i + 1, 0, createCompositionNode(composition));
+                        break;
+                    }
+                    else if (componentIndex === 0 && composition.index === 0) {
+                        nodes.unshift(createCompositionNode(composition));
+                        break;
+                    }
+                }
+                else if (child.tagName === 'br') {
+                    const location = child.location;
+                    if (location) {
+                        if (location.endIndex === composition.index) {
+                            nodes.splice(i + 1, 0, createCompositionNode(composition));
+                            break;
+                        }
+                        else if (location.startIndex === 0 && composition.index === 0) {
+                            nodes.unshift(createCompositionNode(composition));
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 function getNodes(adapter, vElement, nativeNode, result) {
     if (vElement.location) {
@@ -1034,15 +1100,10 @@ class ExperimentalCaret {
     get display() {
         return this._display;
     }
-    constructor(scheduler, editorMask) {
+    constructor(adapter, scheduler, editorMask) {
+        this.adapter = adapter;
         this.scheduler = scheduler;
         this.editorMask = editorMask;
-        this.compositionState = null;
-        this.compositionElement = createElement('span', {
-            styles: {
-                textDecoration: 'underline'
-            }
-        });
         this.timer = null;
         this.oldPosition = null;
         this._display = true;
@@ -1186,12 +1247,11 @@ class ExperimentalCaret {
             this.positionChangeEvent.next(null);
             return;
         }
-        if (this.compositionState) {
-            const compositionElement = this.compositionElement;
-            compositionElement.innerText = this.compositionState.data;
+        const compositionNode = this.adapter.compositionNode;
+        if (compositionNode) {
             nativeRange = nativeRange.cloneRange();
-            nativeRange.insertNode(compositionElement);
-            nativeRange.selectNodeContents(compositionElement);
+            nativeRange.insertNode(compositionNode);
+            nativeRange.selectNodeContents(compositionNode);
             nativeRange.collapse();
         }
         const rect = getLayoutRectByRange(nativeRange);
@@ -1252,8 +1312,9 @@ exports.MagicInput = class MagicInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(parser, keyboard, commander, selection, controller, scheduler, textbus) {
+    constructor(adapter, parser, keyboard, commander, selection, controller, scheduler, textbus) {
         super();
+        this.adapter = adapter;
         this.parser = parser;
         this.keyboard = keyboard;
         this.commander = commander;
@@ -1262,8 +1323,7 @@ exports.MagicInput = class MagicInput extends Input {
         this.scheduler = scheduler;
         this.textbus = textbus;
         this.composition = false;
-        this.compositionState = null;
-        this.caret = new ExperimentalCaret(this.scheduler, this.textbus.get(VIEW_MASK));
+        this.caret = new ExperimentalCaret(this.adapter, this.scheduler, this.textbus.get(VIEW_MASK));
         this.isSafari = isSafari();
         this.isFirefox = isFirefox();
         this.isMac = isMac();
@@ -1303,13 +1363,8 @@ exports.MagicInput = class MagicInput extends Input {
         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.reInit();
                 }
             });
         }
@@ -1325,6 +1380,22 @@ exports.MagicInput = class MagicInput extends Input {
         this.caret.destroy();
         this.subscription.unsubscribe();
     }
+    reInit(delay = false) {
+        var _a, _b, _c;
+        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();
+        if (delay) {
+            setTimeout(() => {
+                var _a;
+                (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        else {
+            (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    }
     init() {
         const doc = this.doc;
         const contentBody = doc.body;
@@ -1333,9 +1404,19 @@ exports.MagicInput = class MagicInput extends Input {
         contentBody.appendChild(textarea);
         this.textarea = textarea;
         this.subscription.add(stream.fromEvent(textarea, 'blur').subscribe(() => {
+            // if (this.isFocus) {
+            //   this.isFocus = false
+            //   this.reInit(true)
+            // }
             this.isFocus = false;
             this.nativeFocus = false;
             this.caret.hide();
+            if (this.adapter.composition) {
+                const slot = this.adapter.composition.slot;
+                this.adapter.composition = null;
+                this.adapter.compositionNode = null;
+                slot.changeMarker.forceMarkDirtied();
+            }
         }), stream.fromEvent(textarea, 'focus').subscribe(() => {
             this.nativeFocus = true;
         }), this.caret.onStyleChange.subscribe(style => {
@@ -1458,7 +1539,6 @@ exports.MagicInput = class MagicInput extends Input {
                 this.commander.delete();
             }
             this.composition = true;
-            this.caret.compositionState = this.compositionState = null;
             startIndex = this.selection.startOffset;
             const startSlot = this.selection.startSlot;
             const event = new core$1.Event(startSlot, {
@@ -1475,10 +1555,11 @@ exports.MagicInput = class MagicInput extends Input {
                 return;
             }
             const startSlot = this.selection.startSlot;
-            this.caret.compositionState = this.compositionState = {
+            this.adapter.composition = {
                 slot: startSlot,
-                index: startIndex,
-                data: ev.data
+                text: ev.data,
+                offset: ev.data.length,
+                index: startIndex
             };
             this.caret.refresh(true);
             const event = new core$1.Event(startSlot, {
@@ -1486,6 +1567,7 @@ exports.MagicInput = class MagicInput extends Input {
                 data: ev.data
             });
             core$1.invokeListener(startSlot.parent, 'onCompositionUpdate', event);
+            startSlot.changeMarker.forceMarkDirtied();
         }));
         let isCompositionEnd = false;
         this.subscription.add(stream.merge(stream.fromEvent(textarea, 'beforeinput').pipe(stream.filter(ev => {
@@ -1509,24 +1591,15 @@ exports.MagicInput = class MagicInput extends Input {
             textarea.value = '';
             return ev.data;
         }))).subscribe(text => {
+            var _a;
             this.composition = false;
-            this.caret.compositionState = this.compositionState = null;
-            const compositionElement = this.caret.compositionElement;
-            let nextSibling = compositionElement.nextSibling;
-            while (nextSibling) {
-                if (!nextSibling.textContent) {
-                    const next = nextSibling.nextSibling;
-                    nextSibling.remove();
-                    nextSibling = next;
-                    continue;
-                }
-                nextSibling.remove();
-                break;
-            }
-            compositionElement.remove();
+            this.adapter.composition = null;
             if (text) {
                 this.commander.write(text);
             }
+            else {
+                (_a = this.selection.startSlot) === null || _a === void 0 ? void 0 : _a.changeMarker.forceMarkDirtied();
+            }
             if (isCompositionEnd) {
                 const startSlot = this.selection.startSlot;
                 if (startSlot) {
@@ -1555,7 +1628,8 @@ exports.MagicInput = class MagicInput extends Input {
 };
 exports.MagicInput = __decorate([
     core.Injectable(),
-    __metadata("design:paramtypes", [exports.Parser,
+    __metadata("design:paramtypes", [DomAdapter,
+        exports.Parser,
         core$1.Keyboard,
         core$1.Commander,
         core$1.Selection,
@@ -1627,6 +1701,7 @@ exports.CollaborateCursor = class CollaborateCursor {
         this.onRectsChange = new stream.Subject();
         this.subscription = new stream.Subscription();
         this.currentSelection = [];
+        this.ratio = window.devicePixelRatio || 1;
         this.container = textbus.get(VIEW_CONTAINER);
         this.canvasContainer.append(this.canvas);
         this.host.append(this.canvasContainer, this.tooltips);
@@ -1670,8 +1745,9 @@ exports.CollaborateCursor = class CollaborateCursor {
         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.canvas.width = this.canvas.offsetWidth * this.ratio;
+        this.canvas.height = this.canvas.offsetHeight * this.ratio;
+        this.context.scale(this.ratio, this.ratio);
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
         const users = [];
         paths.filter(i => {
@@ -1696,8 +1772,13 @@ exports.CollaborateCursor = class CollaborateCursor {
                 return;
             }
             const nativeRange = document.createRange();
-            nativeRange.setStart(anchor.node, anchor.offset);
-            nativeRange.setEnd(focus.node, focus.offset);
+            try {
+                nativeRange.setStart(anchor.node, anchor.offset);
+                nativeRange.setEnd(focus.node, focus.offset);
+            }
+            catch (e) {
+                return;
+            }
             if ((anchor.node !== focus.node || anchor.offset !== focus.offset) && nativeRange.collapsed) {
                 nativeRange.setStart(focus.node, focus.offset);
                 nativeRange.setEnd(anchor.node, anchor.offset);
@@ -1960,7 +2041,7 @@ let NativeInput = class NativeInput extends Input {
         this.controller = controller;
         this.caret = new NativeCaret(this.scheduler);
         this.composition = false;
-        this.compositionState = null;
+        // compositionState: CompositionState | null = null
         this.onReady = Promise.resolve();
         this._disabled = false;
         this.nativeSelection = document.getSelection();
@@ -2118,7 +2199,6 @@ let NativeInput = class NativeInput extends Input {
         let startIndex;
         const compositionStart = () => {
             this.composition = true;
-            this.compositionState = null;
             startIndex = this.selection.startOffset;
             const startSlot = this.selection.startSlot;
             const event = new core$1.Event(startSlot, {
@@ -2128,11 +2208,6 @@ let NativeInput = class NativeInput extends Input {
         };
         const compositionUpdate = (data) => {
             const startSlot = this.selection.startSlot;
-            this.compositionState = {
-                slot: startSlot,
-                index: startIndex,
-                data
-            };
             const event = new core$1.Event(startSlot, {
                 index: startIndex,
                 data
@@ -2219,7 +2294,6 @@ let NativeInput = class NativeInput extends Input {
             return !this.ignoreComposition;
         })).subscribe(() => {
             this.composition = true;
-            this.compositionState = null;
             startIndex = this.selection.startOffset;
             const startSlot = this.selection.startSlot;
             const event = new core$1.Event(startSlot, {
@@ -2230,11 +2304,6 @@ let NativeInput = class NativeInput extends Input {
             return !this.ignoreComposition;
         })).subscribe(ev => {
             const startSlot = this.selection.startSlot;
-            this.compositionState = {
-                slot: startSlot,
-                index: startIndex,
-                data: ev.data
-            };
             const event = new core$1.Event(startSlot, {
                 index: startIndex,
                 data: ev.data
@@ -2284,7 +2353,6 @@ let NativeInput = class NativeInput extends Input {
                 return !b;
             }))).subscribe(text => {
             this.composition = false;
-            this.compositionState = null;
             if (text) {
                 this.commander.write(text);
             }

package/bundles/magic-input.d.ts

@@ -1,21 +1,21 @@
 import { Observable } from '@tanbo/stream';
 import { Commander, Controller, Keyboard, Scheduler, Selection, Textbus } from '@textbus/core';
 import { Parser } from './parser';
-import { Caret, CaretPosition, CompositionState, Input, Scroller } from './types';
+import { Caret, CaretPosition, Input, Scroller } from './types';
+import { DomAdapter } from './dom-adapter';
 interface CaretStyle {
     height: string;
     lineHeight: string;
     fontSize: string;
 }
 declare class ExperimentalCaret implements Caret {
+    private adapter;
     private scheduler;
     private editorMask;
     onPositionChange: Observable<CaretPosition | null>;
     onStyleChange: Observable<CaretStyle>;
     elementRef: HTMLElement;
-    compositionState: CompositionState | null;
     get rect(): DOMRect;
-    compositionElement: HTMLElement;
     private timer;
     private caret;
     private oldPosition;
@@ -29,7 +29,7 @@ declare class ExperimentalCaret implements Caret {
     private styleChangeEvent;
     private oldRange;
     private isFixed;
-    constructor(scheduler: Scheduler, editorMask: HTMLElement);
+    constructor(adapter: DomAdapter<any, any>, scheduler: Scheduler, editorMask: HTMLElement);
     refresh(isFixedCaret?: boolean): void;
     show(range: Range, restart: boolean): void;
     hide(): void;
@@ -41,6 +41,7 @@ declare class ExperimentalCaret implements Caret {
  * Textbus PC 端输入实现
  */
 export declare class MagicInput extends Input {
+    private adapter;
     private parser;
     private keyboard;
     private commander;
@@ -49,7 +50,6 @@ export declare class MagicInput extends Input {
     private scheduler;
     private textbus;
     composition: boolean;
-    compositionState: CompositionState | null;
     onReady: Promise<void>;
     caret: ExperimentalCaret;
     set disabled(b: boolean);
@@ -66,10 +66,11 @@ export declare class MagicInput extends Input {
     private isFocus;
     private nativeFocus;
     private ignoreComposition;
-    constructor(parser: Parser, keyboard: Keyboard, commander: Commander, selection: Selection, controller: Controller, scheduler: Scheduler, textbus: Textbus);
+    constructor(adapter: DomAdapter<any, any>, parser: Parser, keyboard: Keyboard, commander: Commander, selection: Selection, controller: Controller, scheduler: Scheduler, textbus: Textbus);
     focus(range: Range, restart: boolean): void;
     blur(): void;
     destroy(): void;
+    private reInit;
     private init;
     private handleDefaultActions;
     private handlePaste;

package/bundles/native-input.d.ts

@@ -1,6 +1,6 @@
 import { Observable } from '@tanbo/stream';
 import { Commander, Controller, Keyboard, Scheduler, Selection, Textbus } from '@textbus/core';
-import { Caret, CaretPosition, CompositionState, Input, Scroller } from './types';
+import { Caret, CaretPosition, Input, Scroller } from './types';
 import { Parser } from './parser';
 import { DomAdapter } from './dom-adapter';
 declare class NativeCaret implements Caret {
@@ -28,7 +28,6 @@ export declare class NativeInput extends Input {
     private controller;
     caret: NativeCaret;
     composition: boolean;
-    compositionState: CompositionState | null;
     onReady: Promise<void>;
     set disabled(b: boolean);
     get disabled(): boolean;

package/bundles/types.d.ts

@@ -1,4 +1,3 @@
-import { Slot } from '@textbus/core';
 import { Observable } from '@tanbo/stream';
 import { Rect } from './_utils/uikit';
 export interface CaretLimit {
@@ -21,11 +20,6 @@ export interface Caret {
     refresh(isFixedCaret: boolean): void;
     correctScrollTop(scroller: Scroller): void;
 }
-export interface CompositionState {
-    slot: Slot;
-    index: number;
-    data: string;
-}
 export declare abstract class Input {
     /**
      * @experimental
@@ -34,7 +28,6 @@ export declare abstract class Input {
     /**
      * @experimental
      */
-    abstract compositionState: CompositionState | null;
     abstract onReady: Promise<void>;
     abstract caret: Caret;
     abstract disabled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "4.0.0-alpha.31",
+  "version": "4.0.0-alpha.33",
   "description": "Textbus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -26,9 +26,9 @@
   ],
   "dependencies": {
     "@tanbo/stream": "^1.2.3",
-    "@textbus/collaborate": "^4.0.0-alpha.31",
-    "@textbus/core": "^4.0.0-alpha.31",
-    "@viewfly/core": "^0.6.1",
+    "@textbus/collaborate": "^4.0.0-alpha.33",
+    "@textbus/core": "^4.0.0-alpha.33",
+    "@viewfly/core": "^0.6.3",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
@@ -49,5 +49,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "54c13967d549e9c3795eb821d84ce3e811139630"
+  "gitHead": "5eb73f9a388d331946a8579aa6eaa23cc44bffe0"
 }