@textbus/platform-browser 3.0.0-alpha.51 → 3.0.0-alpha.52

package/bundles/collaborate/collaborate-cursor.d.ts

@@ -1,5 +1,5 @@
 import { Injector } from '@tanbo/di';
-import { Selection, SelectionPaths, AbstractSelection, Renderer } from '@textbus/core';
+import { Selection, SelectionPaths, AbstractSelection, Scheduler } from '@textbus/core';
 import { SelectionBridge } from '../core/selection-bridge';
 import { Rect } from '../_utils/uikit';
 export interface RemoteSelection {
@@ -24,7 +24,7 @@ export declare abstract class CollaborateSelectionAwarenessDelegate {
 export declare class CollaborateCursor {
     private injector;
     private nativeSelection;
-    private renderer;
+    private scheduler;
     private selection;
     private awarenessDelegate?;
     private host;
@@ -36,7 +36,7 @@ export declare class CollaborateCursor {
     private subscription;
     private currentSelection;
     private container;
-    constructor(injector: Injector, nativeSelection: SelectionBridge, renderer: Renderer, selection: Selection, awarenessDelegate?: CollaborateSelectionAwarenessDelegate | undefined);
+    constructor(injector: Injector, nativeSelection: SelectionBridge, scheduler: Scheduler, selection: Selection, awarenessDelegate?: CollaborateSelectionAwarenessDelegate | undefined);
     refresh(): void;
     destroy(): void;
     draw(paths: RemoteSelection[]): void;

package/bundles/core/magic-input.d.ts

@@ -10,6 +10,7 @@ interface CaretStyle {
 }
 interface CompositionState {
     slot: Slot;
+    index: number;
     data: string;
 }
 declare class ExperimentalCaret implements Caret {
@@ -20,6 +21,7 @@ declare class ExperimentalCaret implements Caret {
     elementRef: HTMLElement;
     compositionState: CompositionState | null;
     get rect(): DOMRect;
+    compositionElement: HTMLElement;
     private timer;
     private caret;
     private oldPosition;
@@ -32,7 +34,6 @@ declare class ExperimentalCaret implements Caret {
     private styleChangeEvent;
     private oldRange;
     private isFixed;
-    private compositionElement;
     constructor(scheduler: Scheduler, editorMask: HTMLElement);
     refresh(isFixedCaret?: boolean): void;
     show(range: Range, restart: boolean): void;

package/bundles/index.esm.js

@@ -1,6 +1,6 @@
 import 'reflect-metadata';
 import { InjectionToken, Injectable, Inject, Injector, Optional } from '@tanbo/di';
-import { VTextNode, VElement, Controller, Selection, RootComponentRef, Renderer, Slot, ContentType, Keyboard, Commander, Scheduler, makeError, Starter, NativeRenderer, NativeSelectionBridge, OutputRenderer, Registry, invokeListener, History } from '@textbus/core';
+import { VTextNode, VElement, Controller, Selection, RootComponentRef, Renderer, Scheduler, Slot, ContentType, Keyboard, Commander, makeError, Starter, NativeRenderer, NativeSelectionBridge, OutputRenderer, Registry, invokeListener, History } from '@textbus/core';
 import { Subject, filter, fromEvent, Subscription, merge, map, Observable, distinctUntilChanged } from '@tanbo/stream';
 
 function createElement(tagName, options = {}) {
@@ -59,8 +59,8 @@ function getLayoutRectByRange(range) {
         }
         else if (beforeNode.nodeType === Node.TEXT_NODE) {
             const range2 = document.createRange();
-            range2.selectNodeContents(beforeNode);
-            range2.collapse();
+            range2.setStart(beforeNode, beforeNode.textContent.length);
+            range2.setEnd(beforeNode, beforeNode.textContent.length);
             return range2.getBoundingClientRect();
         }
     }
@@ -776,10 +776,10 @@ SelectionBridge = __decorate([
 class CollaborateSelectionAwarenessDelegate {
 }
 let CollaborateCursor = class CollaborateCursor {
-    constructor(injector, nativeSelection, renderer, selection, awarenessDelegate) {
+    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
         this.injector = injector;
         this.nativeSelection = nativeSelection;
-        this.renderer = renderer;
+        this.scheduler = scheduler;
         this.selection = selection;
         this.awarenessDelegate = awarenessDelegate;
         this.host = createElement('div', {
@@ -845,7 +845,7 @@ let CollaborateCursor = class CollaborateCursor {
         }), fromEvent(window, 'resize').subscribe(() => {
             this.canvas.style.height = document.documentElement.clientHeight + 'px';
             this.refresh();
-        }), this.renderer.onViewUpdated.subscribe(() => {
+        }), this.scheduler.onDocChanged.subscribe(() => {
             this.refresh();
         }));
     }
@@ -1017,7 +1017,7 @@ CollaborateCursor = __decorate([
     __param(4, Optional()),
     __metadata("design:paramtypes", [Injector,
         SelectionBridge,
-        Renderer,
+        Scheduler,
         Selection,
         CollaborateSelectionAwarenessDelegate])
 ], CollaborateCursor);
@@ -1328,24 +1328,24 @@ Parser = Parser_1 = __decorate([
     __metadata("design:paramtypes", [Object, Injector])
 ], Parser);
 
-const iframeHTML = `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Textbus</title>
-  <style>
-    html {position: fixed; left:0; overflow: hidden}
-    html, body{height: 100%;width:100%}
-    body{margin:0; overflow: hidden}
-    textarea{width: 2000px;height: 100%;opacity: 0; padding: 0; outline: none; border: none; position: absolute; left:0; top:0;}
-  </style>
-</head>
-<body>
-</body>
-</html>
+const iframeHTML = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Textbus</title>
+  <style>
+    html {position: fixed; left:0; overflow: hidden}
+    html, body{height: 100%;width:100%}
+    body{margin:0; overflow: hidden}
+    textarea{width: 2000px;height: 100%;opacity: 0; padding: 0; outline: none; border: none; position: absolute; left:0; top:0;}
+  </style>
+</head>
+<body>
+</body>
+</html>
 `;
 class ExperimentalCaret {
     get rect() {
@@ -1362,6 +1362,11 @@ class ExperimentalCaret {
         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;
@@ -1371,11 +1376,6 @@ class ExperimentalCaret {
         this.styleChangeEvent = new Subject();
         this.oldRange = null;
         this.isFixed = false;
-        this.compositionElement = createElement('span', {
-            styles: {
-                textDecoration: 'underline'
-            }
-        });
         this.onPositionChange = this.positionChangeEvent.pipe(distinctUntilChanged());
         this.onStyleChange = this.styleChangeEvent.asObservable();
         this.elementRef = createElement('div', {
@@ -1767,19 +1767,24 @@ let MagicInput = class MagicInput extends Input {
         }));
     }
     handleInput(textarea) {
-        this.subscription.add(fromEvent(textarea, 'compositionupdate').subscribe(ev => {
+        let startIndex = 0;
+        this.subscription.add(fromEvent(textarea, 'compositionstart').subscribe(() => {
+            startIndex = this.selection.startOffset;
+        }), fromEvent(textarea, 'compositionupdate').subscribe(ev => {
             if (ev.data === ' ') {
                 // 处理搜狗五笔不符合 composition 事件预期，会意外跳光标的问题
                 return;
             }
-            const slot = this.selection.startSlot;
             this.caret.compositionState = {
-                slot,
+                slot: this.selection.startSlot,
+                index: startIndex,
                 data: ev.data
             };
-            slot.changeMarker.forceMarkDirtied();
+            this.caret.refresh(true);
         }), fromEvent(textarea, 'compositionend').subscribe(() => {
+            var _a;
             this.caret.compositionState = null;
+            (_a = this.caret.compositionElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.caret.compositionElement);
         }));
         this.subscription.add(merge(fromEvent(textarea, 'beforeinput').pipe(filter(ev => {
             ev.preventDefault();

package/bundles/index.js

@@ -61,8 +61,8 @@ function getLayoutRectByRange(range) {
         }
         else if (beforeNode.nodeType === Node.TEXT_NODE) {
             const range2 = document.createRange();
-            range2.selectNodeContents(beforeNode);
-            range2.collapse();
+            range2.setStart(beforeNode, beforeNode.textContent.length);
+            range2.setEnd(beforeNode, beforeNode.textContent.length);
             return range2.getBoundingClientRect();
         }
     }
@@ -778,10 +778,10 @@ exports.SelectionBridge = __decorate([
 class CollaborateSelectionAwarenessDelegate {
 }
 exports.CollaborateCursor = class CollaborateCursor {
-    constructor(injector, nativeSelection, renderer, selection, awarenessDelegate) {
+    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
         this.injector = injector;
         this.nativeSelection = nativeSelection;
-        this.renderer = renderer;
+        this.scheduler = scheduler;
         this.selection = selection;
         this.awarenessDelegate = awarenessDelegate;
         this.host = createElement('div', {
@@ -847,7 +847,7 @@ exports.CollaborateCursor = class CollaborateCursor {
         }), stream.fromEvent(window, 'resize').subscribe(() => {
             this.canvas.style.height = document.documentElement.clientHeight + 'px';
             this.refresh();
-        }), this.renderer.onViewUpdated.subscribe(() => {
+        }), this.scheduler.onDocChanged.subscribe(() => {
             this.refresh();
         }));
     }
@@ -1019,7 +1019,7 @@ exports.CollaborateCursor = __decorate([
     __param(4, di.Optional()),
     __metadata("design:paramtypes", [di.Injector,
         exports.SelectionBridge,
-        core.Renderer,
+        core.Scheduler,
         core.Selection,
         CollaborateSelectionAwarenessDelegate])
 ], exports.CollaborateCursor);
@@ -1330,24 +1330,24 @@ exports.Parser = Parser_1 = __decorate([
     __metadata("design:paramtypes", [Object, di.Injector])
 ], exports.Parser);
 
-const iframeHTML = `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Textbus</title>
-  <style>
-    html {position: fixed; left:0; overflow: hidden}
-    html, body{height: 100%;width:100%}
-    body{margin:0; overflow: hidden}
-    textarea{width: 2000px;height: 100%;opacity: 0; padding: 0; outline: none; border: none; position: absolute; left:0; top:0;}
-  </style>
-</head>
-<body>
-</body>
-</html>
+const iframeHTML = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Textbus</title>
+  <style>
+    html {position: fixed; left:0; overflow: hidden}
+    html, body{height: 100%;width:100%}
+    body{margin:0; overflow: hidden}
+    textarea{width: 2000px;height: 100%;opacity: 0; padding: 0; outline: none; border: none; position: absolute; left:0; top:0;}
+  </style>
+</head>
+<body>
+</body>
+</html>
 `;
 class ExperimentalCaret {
     get rect() {
@@ -1364,6 +1364,11 @@ class ExperimentalCaret {
         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;
@@ -1373,11 +1378,6 @@ class ExperimentalCaret {
         this.styleChangeEvent = new stream.Subject();
         this.oldRange = null;
         this.isFixed = false;
-        this.compositionElement = createElement('span', {
-            styles: {
-                textDecoration: 'underline'
-            }
-        });
         this.onPositionChange = this.positionChangeEvent.pipe(stream.distinctUntilChanged());
         this.onStyleChange = this.styleChangeEvent.asObservable();
         this.elementRef = createElement('div', {
@@ -1769,19 +1769,24 @@ exports.MagicInput = class MagicInput extends Input {
         }));
     }
     handleInput(textarea) {
-        this.subscription.add(stream.fromEvent(textarea, 'compositionupdate').subscribe(ev => {
+        let startIndex = 0;
+        this.subscription.add(stream.fromEvent(textarea, 'compositionstart').subscribe(() => {
+            startIndex = this.selection.startOffset;
+        }), stream.fromEvent(textarea, 'compositionupdate').subscribe(ev => {
             if (ev.data === ' ') {
                 // 处理搜狗五笔不符合 composition 事件预期，会意外跳光标的问题
                 return;
             }
-            const slot = this.selection.startSlot;
             this.caret.compositionState = {
-                slot,
+                slot: this.selection.startSlot,
+                index: startIndex,
                 data: ev.data
             };
-            slot.changeMarker.forceMarkDirtied();
+            this.caret.refresh(true);
         }), stream.fromEvent(textarea, 'compositionend').subscribe(() => {
+            var _a;
             this.caret.compositionState = null;
+            (_a = this.caret.compositionElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.caret.compositionElement);
         }));
         this.subscription.add(stream.merge(stream.fromEvent(textarea, 'beforeinput').pipe(stream.filter(ev => {
             ev.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "3.0.0-alpha.51",
+  "version": "3.0.0-alpha.52",
   "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",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@tanbo/di": "^1.1.4",
     "@tanbo/stream": "^1.1.9",
-    "@textbus/core": "^3.0.0-alpha.51",
+    "@textbus/core": "^3.0.0-alpha.50",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "4f2557bae5aa8800130c827f502d4439bddb1ff4"
+  "gitHead": "4c64b9a00d2a4e87ad7bfdc9502b8a70ed1dc39a"
 }