@textbus/platform-browser 3.0.0-alpha.49 → 3.0.0-alpha.50

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

@@ -1,6 +1,6 @@
 import { Observable } from '@tanbo/stream';
 import { Injector } from '@tanbo/di';
-import { Commander, Controller, Keyboard, Scheduler, Selection } from '@textbus/core';
+import { Commander, Controller, Keyboard, Scheduler, Selection, Slot } from '@textbus/core';
 import { Parser } from '../dom-support/parser';
 import { Caret, CaretPosition, Input, Scroller } from './types';
 interface CaretStyle {
@@ -8,12 +8,18 @@ interface CaretStyle {
     lineHeight: string;
     fontSize: string;
 }
+interface CompositionState {
+    slot: Slot;
+    index: number;
+    data: string;
+}
 declare class ExperimentalCaret implements Caret {
     private scheduler;
     private editorMask;
     onPositionChange: Observable<CaretPosition | null>;
     onStyleChange: Observable<CaretStyle>;
     elementRef: HTMLElement;
+    compositionState: CompositionState | null;
     get rect(): DOMRect;
     private timer;
     private caret;
@@ -27,6 +33,7 @@ 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;
@@ -51,6 +58,9 @@ export declare class MagicInput extends Input {
     caret: ExperimentalCaret;
     set disabled(b: boolean);
     get disabled(): boolean;
+    private isSafari;
+    private isMac;
+    private isWindows;
     private _disabled;
     private container;
     private subscription;
@@ -58,9 +68,6 @@ export declare class MagicInput extends Input {
     private textarea;
     private isFocus;
     private nativeFocus;
-    private isSafari;
-    private isMac;
-    private isWindows;
     private isSougouPinYin;
     constructor(parser: Parser, keyboard: Keyboard, commander: Commander, selection: Selection, controller: Controller, scheduler: Scheduler, injector: Injector);
     focus(range: Range, restart: boolean): void;

package/bundles/index.esm.js

@@ -1361,6 +1361,7 @@ class ExperimentalCaret {
     constructor(scheduler, editorMask) {
         this.scheduler = scheduler;
         this.editorMask = editorMask;
+        this.compositionState = null;
         this.timer = null;
         this.oldPosition = null;
         this._display = true;
@@ -1370,6 +1371,11 @@ 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', {
@@ -1502,6 +1508,14 @@ class ExperimentalCaret {
             this.positionChangeEvent.next(null);
             return;
         }
+        if (this.compositionState) {
+            const compositionElement = this.compositionElement;
+            compositionElement.innerText = this.compositionState.data;
+            nativeRange = nativeRange.cloneRange();
+            nativeRange.insertNode(compositionElement);
+            nativeRange.selectNodeContents(compositionElement);
+            nativeRange.collapse();
+        }
         const rect = getLayoutRectByRange(nativeRange);
         const { fontSize, lineHeight, color } = getComputedStyle(node);
         let height;
@@ -1571,15 +1585,15 @@ let MagicInput = class MagicInput extends Input {
         this.injector = injector;
         this.composition = false;
         this.caret = new ExperimentalCaret(this.scheduler, this.injector.get(VIEW_MASK));
+        this.isSafari = isSafari();
+        this.isMac = isMac();
+        this.isWindows = isWindows();
         this._disabled = false;
         this.container = this.createEditableFrame();
         this.subscription = new Subscription();
         this.textarea = null;
         this.isFocus = false;
         this.nativeFocus = false;
-        this.isSafari = isSafari();
-        this.isMac = isMac();
-        this.isWindows = isWindows();
         this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
         this.onReady = new Promise(resolve => {
             this.subscription.add(fromEvent(this.container, 'load').subscribe(() => {
@@ -1753,6 +1767,19 @@ let MagicInput = class MagicInput extends Input {
         }));
     }
     handleInput(textarea) {
+        let startIndex = 0;
+        this.subscription.add(fromEvent(textarea, 'compositionstart').subscribe(() => {
+            startIndex = this.selection.startOffset;
+        }), fromEvent(textarea, 'compositionupdate').subscribe(ev => {
+            this.caret.compositionState = {
+                slot: this.selection.startSlot,
+                index: startIndex,
+                data: ev.data
+            };
+            this.caret.refresh(true);
+        }), fromEvent(textarea, 'compositionend').subscribe(() => {
+            this.caret.compositionState = null;
+        }));
         this.subscription.add(merge(fromEvent(textarea, 'beforeinput').pipe(filter(ev => {
             ev.preventDefault();
             if (this.isSafari) {
@@ -1786,7 +1813,7 @@ let MagicInput = class MagicInput extends Input {
                 display: 'block',
                 height: '100%',
                 position: 'relative',
-                top: this.isWindows ? '6px' : '0'
+                top: this.isWindows ? '3px' : '0'
             }
         });
     }
@@ -1908,7 +1935,7 @@ let NativeInput = class NativeInput extends Input {
     set disabled(b) {
         this._disabled = b;
         if (b && !this.controller.readonly) {
-            this.documentView.contentEditable = b ? 'true' : 'false';
+            this.documentView.contentEditable = b ? 'false' : 'true';
         }
     }
     get disabled() {
@@ -2609,7 +2636,7 @@ class Viewer extends Starter {
         });
         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 || []));
+        editModeStyles.push(`#${this.id} *::selection{background-color: rgba(18, 150, 219, .4); color:inherit}`, ...(options.editingStyleSheets || []));
         this.styleSheet = Viewer.cssMin(docStyles.join(''));
         styleEl.innerHTML = this.styleSheet + Viewer.cssMin(editModeStyles.join(''));
         this.resourceNodes.push(styleEl);

package/bundles/index.js

@@ -1363,6 +1363,7 @@ class ExperimentalCaret {
     constructor(scheduler, editorMask) {
         this.scheduler = scheduler;
         this.editorMask = editorMask;
+        this.compositionState = null;
         this.timer = null;
         this.oldPosition = null;
         this._display = true;
@@ -1372,6 +1373,11 @@ 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', {
@@ -1504,6 +1510,14 @@ class ExperimentalCaret {
             this.positionChangeEvent.next(null);
             return;
         }
+        if (this.compositionState) {
+            const compositionElement = this.compositionElement;
+            compositionElement.innerText = this.compositionState.data;
+            nativeRange = nativeRange.cloneRange();
+            nativeRange.insertNode(compositionElement);
+            nativeRange.selectNodeContents(compositionElement);
+            nativeRange.collapse();
+        }
         const rect = getLayoutRectByRange(nativeRange);
         const { fontSize, lineHeight, color } = getComputedStyle(node);
         let height;
@@ -1573,15 +1587,15 @@ exports.MagicInput = class MagicInput extends Input {
         this.injector = injector;
         this.composition = false;
         this.caret = new ExperimentalCaret(this.scheduler, this.injector.get(VIEW_MASK));
+        this.isSafari = isSafari();
+        this.isMac = isMac();
+        this.isWindows = isWindows();
         this._disabled = false;
         this.container = this.createEditableFrame();
         this.subscription = new stream.Subscription();
         this.textarea = null;
         this.isFocus = false;
         this.nativeFocus = false;
-        this.isSafari = isSafari();
-        this.isMac = isMac();
-        this.isWindows = isWindows();
         this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
         this.onReady = new Promise(resolve => {
             this.subscription.add(stream.fromEvent(this.container, 'load').subscribe(() => {
@@ -1755,6 +1769,19 @@ exports.MagicInput = class MagicInput extends Input {
         }));
     }
     handleInput(textarea) {
+        let startIndex = 0;
+        this.subscription.add(stream.fromEvent(textarea, 'compositionstart').subscribe(() => {
+            startIndex = this.selection.startOffset;
+        }), stream.fromEvent(textarea, 'compositionupdate').subscribe(ev => {
+            this.caret.compositionState = {
+                slot: this.selection.startSlot,
+                index: startIndex,
+                data: ev.data
+            };
+            this.caret.refresh(true);
+        }), stream.fromEvent(textarea, 'compositionend').subscribe(() => {
+            this.caret.compositionState = null;
+        }));
         this.subscription.add(stream.merge(stream.fromEvent(textarea, 'beforeinput').pipe(stream.filter(ev => {
             ev.preventDefault();
             if (this.isSafari) {
@@ -1788,7 +1815,7 @@ exports.MagicInput = class MagicInput extends Input {
                 display: 'block',
                 height: '100%',
                 position: 'relative',
-                top: this.isWindows ? '6px' : '0'
+                top: this.isWindows ? '3px' : '0'
             }
         });
     }
@@ -1910,7 +1937,7 @@ exports.NativeInput = class NativeInput extends Input {
     set disabled(b) {
         this._disabled = b;
         if (b && !this.controller.readonly) {
-            this.documentView.contentEditable = b ? 'true' : 'false';
+            this.documentView.contentEditable = b ? 'false' : 'true';
         }
     }
     get disabled() {
@@ -2611,7 +2638,7 @@ class Viewer extends core.Starter {
         });
         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 || []));
+        editModeStyles.push(`#${this.id} *::selection{background-color: rgba(18, 150, 219, .4); color:inherit}`, ...(options.editingStyleSheets || []));
         this.styleSheet = Viewer.cssMin(docStyles.join(''));
         styleEl.innerHTML = this.styleSheet + Viewer.cssMin(editModeStyles.join(''));
         this.resourceNodes.push(styleEl);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "3.0.0-alpha.49",
+  "version": "3.0.0-alpha.50",
   "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.49",
+    "@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": "61f5bf6f105709ecb2cc8f1a5f6f0bf7bcac574e"
+  "gitHead": "ad396a0f17fc18d1eaddd2532f223c1252cf5d6f"
 }