@textbus/platform-browser 3.1.9 → 3.1.12

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

@@ -66,7 +66,7 @@ export declare class MagicInput extends Input {
     private textarea;
     private isFocus;
     private nativeFocus;
-    private isSougouPinYin;
+    private ignoreComposition;
     constructor(parser: Parser, keyboard: Keyboard, commander: Commander, selection: Selection, controller: Controller, scheduler: Scheduler, injector: Injector);
     focus(range: Range, restart: boolean): void;
     blur(): void;

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

@@ -41,7 +41,7 @@ export declare class NativeInput extends Input {
     private isSafari;
     private isMac;
     private isMobileBrowser;
-    private isSougouPinYin;
+    private ignoreComposition;
     constructor(injector: Injector, parser: Parser, scheduler: Scheduler, selection: Selection, keyboard: Keyboard, renderer: Renderer, commander: Commander, controller: Controller);
     focus(nativeRange: Range): void;
     blur(): void;

package/bundles/index.esm.js

@@ -1,7 +1,7 @@
 import 'reflect-metadata';
 import { InjectionToken, Injectable, Inject, Injector, Optional } from '@tanbo/di';
 import { VTextNode, VElement, Controller, Selection, RootComponentRef, Renderer, Scheduler, Slot, ContentType, Event, invokeListener, Keyboard, Commander, makeError, Starter, NativeRenderer, NativeSelectionBridge, OutputRenderer, Registry, History } from '@textbus/core';
-import { Subject, filter, fromEvent, Subscription, merge, map, Observable, distinctUntilChanged } from '@tanbo/stream';
+import { Subject, filter, fromEvent, Subscription, distinctUntilChanged, merge, map, Observable } from '@tanbo/stream';
 
 function createElement(tagName, options = {}) {
     const el = document.createElement(tagName);
@@ -1618,7 +1618,7 @@ let MagicInput = class MagicInput extends Input {
         this.textarea = null;
         this.isFocus = false;
         this.nativeFocus = false;
-        this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
+        this.ignoreComposition = false; // 有 bug 版本搜狗拼音
         this.onReady = new Promise(resolve => {
             this.subscription.add(fromEvent(this.container, 'load').subscribe(() => {
                 const doc = this.container.contentDocument;
@@ -1775,13 +1775,13 @@ let MagicInput = class MagicInput extends Input {
             }
             return !isWriting; // || !this.textarea.value
         })).subscribe(ev => {
+            this.ignoreComposition = false;
             let key = ev.key;
             const keys = ')!@#$%^Z&*(';
             const b = key === 'Process' && /Digit\d/.test(ev.code) && ev.shiftKey;
             if (b) {
                 // 大小写锁定为大写 + 全角 + shift + 数字键，还存在问题
                 key = keys.charAt(+ev.code.substring(5));
-                this.isSougouPinYin = true;
                 ev.preventDefault();
             }
             const is = this.keyboard.execShortcut({
@@ -1791,13 +1791,19 @@ let MagicInput = class MagicInput extends Input {
                 ctrlKey: this.isMac ? ev.metaKey : ev.ctrlKey
             });
             if (is) {
+                this.ignoreComposition = true;
                 ev.preventDefault();
             }
         }));
     }
     handleInput(textarea) {
         let startIndex = 0;
-        this.subscription.add(fromEvent(textarea, 'compositionstart').subscribe(() => {
+        this.subscription.add(fromEvent(textarea, 'compositionstart').pipe(filter(() => {
+            return !this.ignoreComposition;
+        })).subscribe(() => {
+            if (!this.selection.isCollapsed) {
+                this.commander.delete();
+            }
             this.composition = true;
             this.caret.compositionState = this.compositionState = null;
             startIndex = this.selection.startOffset;
@@ -1806,7 +1812,11 @@ let MagicInput = class MagicInput extends Input {
                 index: startIndex
             });
             invokeListener(startSlot.parent, 'onCompositionStart', event);
-        }), fromEvent(textarea, 'compositionupdate').subscribe(ev => {
+        }), fromEvent(textarea, 'compositionupdate').pipe(filter(() => {
+            return !this.ignoreComposition;
+        })).pipe(distinctUntilChanged((prev, next) => {
+            return prev.data !== next.data;
+        })).subscribe(ev => {
             if (ev.data === ' ') {
                 // 处理搜狗五笔不符合 composition 事件预期，会意外跳光标的问题
                 return;
@@ -1837,15 +1847,14 @@ let MagicInput = class MagicInput extends Input {
             return !ev.isComposing && !!ev.data;
         }), map(ev => {
             return ev.data;
-        })), this.isSafari ? new Observable() : fromEvent(textarea, 'compositionend').pipe(map(ev => {
+        })), this.isSafari ? new Observable() : fromEvent(textarea, 'compositionend')
+            .pipe(filter(() => {
+            return !this.ignoreComposition;
+        })).pipe(map(ev => {
             isCompositionEnd = true;
             ev.preventDefault();
             textarea.value = '';
             return ev.data;
-        }), filter(() => {
-            const b = this.isSougouPinYin;
-            this.isSougouPinYin = false;
-            return !b;
         }))).subscribe(text => {
             var _a;
             this.composition = false;
@@ -2026,7 +2035,7 @@ let NativeInput = class NativeInput extends Input {
         this.isSafari = isSafari();
         this.isMac = isMac();
         this.isMobileBrowser = isMobileBrowser();
-        this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
+        this.ignoreComposition = false; // 有 bug 版本搜狗拼音
         this.documentView = injector.get(VIEW_DOCUMENT);
         if (!controller.readonly) {
             this.documentView.contentEditable = 'true';
@@ -2142,11 +2151,12 @@ let NativeInput = class NativeInput extends Input {
             }
             return !isWriting; // || !this.textarea.value
         })).subscribe(ev => {
+            this.ignoreComposition = false;
             let key = ev.key;
-            const b = key === 'Process' && ev.code === 'Digit2';
+            const keys = ')!@#$%^Z&*(';
+            const b = key === 'Process' && /Digit\d/.test(ev.code) && ev.shiftKey;
             if (b) {
-                key = '@';
-                this.isSougouPinYin = true;
+                key = keys.charAt(+ev.code.substring(5));
                 ev.preventDefault();
             }
             const is = this.keyboard.execShortcut({
@@ -2156,6 +2166,7 @@ let NativeInput = class NativeInput extends Input {
                 ctrlKey: this.isMac ? ev.metaKey : ev.ctrlKey
             });
             if (is) {
+                this.ignoreComposition = true;
                 ev.preventDefault();
             }
         }));
@@ -2163,7 +2174,9 @@ let NativeInput = class NativeInput extends Input {
     handleInput(input) {
         let startIndex = 0;
         let isCompositionEnd = false;
-        this.subscription.add(fromEvent(input, 'compositionstart').subscribe(() => {
+        this.subscription.add(fromEvent(input, 'compositionstart').pipe(filter(() => {
+            return !this.ignoreComposition;
+        })).subscribe(() => {
             this.composition = true;
             this.compositionState = null;
             startIndex = this.selection.startOffset;
@@ -2172,7 +2185,9 @@ let NativeInput = class NativeInput extends Input {
                 index: startIndex
             });
             invokeListener(startSlot.parent, 'onCompositionStart', event);
-        }), fromEvent(input, 'compositionupdate').subscribe(ev => {
+        }), fromEvent(input, 'compositionupdate').pipe(filter(() => {
+            return !this.ignoreComposition;
+        })).subscribe(ev => {
             const startSlot = this.selection.startSlot;
             this.compositionState = {
                 slot: startSlot,
@@ -2219,17 +2234,21 @@ let NativeInput = class NativeInput extends Input {
             return null;
         }), filter(text => {
             return text;
-        })), (!this.isMobileBrowser && this.isSafari) ? new Observable() : fromEvent(input, 'compositionend').pipe(filter(() => {
-            return this.composition;
-        }), map(ev => {
-            isCompositionEnd = true;
-            ev.preventDefault();
-            return ev.data;
-        }), filter(() => {
-            const b = this.isSougouPinYin;
-            this.isSougouPinYin = false;
-            return !b;
-        }))).subscribe(text => {
+        })), (!this.isMobileBrowser && this.isSafari) ?
+            new Observable() :
+            fromEvent(input, 'compositionend').pipe(filter(() => {
+                return !this.ignoreComposition;
+            })).pipe(filter(() => {
+                return this.composition;
+            }), map(ev => {
+                isCompositionEnd = true;
+                ev.preventDefault();
+                return ev.data;
+            }), filter(() => {
+                const b = this.ignoreComposition;
+                this.ignoreComposition = false;
+                return !b;
+            }))).subscribe(text => {
             this.composition = false;
             this.compositionState = null;
             if (text) {

package/bundles/index.js

@@ -1620,7 +1620,7 @@ exports.MagicInput = class MagicInput extends Input {
         this.textarea = null;
         this.isFocus = false;
         this.nativeFocus = false;
-        this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
+        this.ignoreComposition = false; // 有 bug 版本搜狗拼音
         this.onReady = new Promise(resolve => {
             this.subscription.add(stream.fromEvent(this.container, 'load').subscribe(() => {
                 const doc = this.container.contentDocument;
@@ -1777,13 +1777,13 @@ exports.MagicInput = class MagicInput extends Input {
             }
             return !isWriting; // || !this.textarea.value
         })).subscribe(ev => {
+            this.ignoreComposition = false;
             let key = ev.key;
             const keys = ')!@#$%^Z&*(';
             const b = key === 'Process' && /Digit\d/.test(ev.code) && ev.shiftKey;
             if (b) {
                 // 大小写锁定为大写 + 全角 + shift + 数字键，还存在问题
                 key = keys.charAt(+ev.code.substring(5));
-                this.isSougouPinYin = true;
                 ev.preventDefault();
             }
             const is = this.keyboard.execShortcut({
@@ -1793,13 +1793,19 @@ exports.MagicInput = class MagicInput extends Input {
                 ctrlKey: this.isMac ? ev.metaKey : ev.ctrlKey
             });
             if (is) {
+                this.ignoreComposition = true;
                 ev.preventDefault();
             }
         }));
     }
     handleInput(textarea) {
         let startIndex = 0;
-        this.subscription.add(stream.fromEvent(textarea, 'compositionstart').subscribe(() => {
+        this.subscription.add(stream.fromEvent(textarea, 'compositionstart').pipe(stream.filter(() => {
+            return !this.ignoreComposition;
+        })).subscribe(() => {
+            if (!this.selection.isCollapsed) {
+                this.commander.delete();
+            }
             this.composition = true;
             this.caret.compositionState = this.compositionState = null;
             startIndex = this.selection.startOffset;
@@ -1808,7 +1814,11 @@ exports.MagicInput = class MagicInput extends Input {
                 index: startIndex
             });
             core.invokeListener(startSlot.parent, 'onCompositionStart', event);
-        }), stream.fromEvent(textarea, 'compositionupdate').subscribe(ev => {
+        }), stream.fromEvent(textarea, 'compositionupdate').pipe(stream.filter(() => {
+            return !this.ignoreComposition;
+        })).pipe(stream.distinctUntilChanged((prev, next) => {
+            return prev.data !== next.data;
+        })).subscribe(ev => {
             if (ev.data === ' ') {
                 // 处理搜狗五笔不符合 composition 事件预期，会意外跳光标的问题
                 return;
@@ -1839,15 +1849,14 @@ exports.MagicInput = class MagicInput extends Input {
             return !ev.isComposing && !!ev.data;
         }), stream.map(ev => {
             return ev.data;
-        })), this.isSafari ? new stream.Observable() : stream.fromEvent(textarea, 'compositionend').pipe(stream.map(ev => {
+        })), this.isSafari ? new stream.Observable() : stream.fromEvent(textarea, 'compositionend')
+            .pipe(stream.filter(() => {
+            return !this.ignoreComposition;
+        })).pipe(stream.map(ev => {
             isCompositionEnd = true;
             ev.preventDefault();
             textarea.value = '';
             return ev.data;
-        }), stream.filter(() => {
-            const b = this.isSougouPinYin;
-            this.isSougouPinYin = false;
-            return !b;
         }))).subscribe(text => {
             var _a;
             this.composition = false;
@@ -2028,7 +2037,7 @@ exports.NativeInput = class NativeInput extends Input {
         this.isSafari = isSafari();
         this.isMac = isMac();
         this.isMobileBrowser = isMobileBrowser();
-        this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
+        this.ignoreComposition = false; // 有 bug 版本搜狗拼音
         this.documentView = injector.get(VIEW_DOCUMENT);
         if (!controller.readonly) {
             this.documentView.contentEditable = 'true';
@@ -2144,11 +2153,12 @@ exports.NativeInput = class NativeInput extends Input {
             }
             return !isWriting; // || !this.textarea.value
         })).subscribe(ev => {
+            this.ignoreComposition = false;
             let key = ev.key;
-            const b = key === 'Process' && ev.code === 'Digit2';
+            const keys = ')!@#$%^Z&*(';
+            const b = key === 'Process' && /Digit\d/.test(ev.code) && ev.shiftKey;
             if (b) {
-                key = '@';
-                this.isSougouPinYin = true;
+                key = keys.charAt(+ev.code.substring(5));
                 ev.preventDefault();
             }
             const is = this.keyboard.execShortcut({
@@ -2158,6 +2168,7 @@ exports.NativeInput = class NativeInput extends Input {
                 ctrlKey: this.isMac ? ev.metaKey : ev.ctrlKey
             });
             if (is) {
+                this.ignoreComposition = true;
                 ev.preventDefault();
             }
         }));
@@ -2165,7 +2176,9 @@ exports.NativeInput = class NativeInput extends Input {
     handleInput(input) {
         let startIndex = 0;
         let isCompositionEnd = false;
-        this.subscription.add(stream.fromEvent(input, 'compositionstart').subscribe(() => {
+        this.subscription.add(stream.fromEvent(input, 'compositionstart').pipe(stream.filter(() => {
+            return !this.ignoreComposition;
+        })).subscribe(() => {
             this.composition = true;
             this.compositionState = null;
             startIndex = this.selection.startOffset;
@@ -2174,7 +2187,9 @@ exports.NativeInput = class NativeInput extends Input {
                 index: startIndex
             });
             core.invokeListener(startSlot.parent, 'onCompositionStart', event);
-        }), stream.fromEvent(input, 'compositionupdate').subscribe(ev => {
+        }), stream.fromEvent(input, 'compositionupdate').pipe(stream.filter(() => {
+            return !this.ignoreComposition;
+        })).subscribe(ev => {
             const startSlot = this.selection.startSlot;
             this.compositionState = {
                 slot: startSlot,
@@ -2221,17 +2236,21 @@ exports.NativeInput = class NativeInput extends Input {
             return null;
         }), stream.filter(text => {
             return text;
-        })), (!this.isMobileBrowser && this.isSafari) ? new stream.Observable() : stream.fromEvent(input, 'compositionend').pipe(stream.filter(() => {
-            return this.composition;
-        }), stream.map(ev => {
-            isCompositionEnd = true;
-            ev.preventDefault();
-            return ev.data;
-        }), stream.filter(() => {
-            const b = this.isSougouPinYin;
-            this.isSougouPinYin = false;
-            return !b;
-        }))).subscribe(text => {
+        })), (!this.isMobileBrowser && this.isSafari) ?
+            new stream.Observable() :
+            stream.fromEvent(input, 'compositionend').pipe(stream.filter(() => {
+                return !this.ignoreComposition;
+            })).pipe(stream.filter(() => {
+                return this.composition;
+            }), stream.map(ev => {
+                isCompositionEnd = true;
+                ev.preventDefault();
+                return ev.data;
+            }), stream.filter(() => {
+                const b = this.ignoreComposition;
+                this.ignoreComposition = false;
+                return !b;
+            }))).subscribe(text => {
             this.composition = false;
             this.compositionState = null;
             if (text) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "3.1.9",
+  "version": "3.1.12",
   "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",
@@ -48,5 +48,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "fac88c46fa8c1b510b212bc53ecae95e60d4adc6"
+  "gitHead": "f0145a1b781944bd43d40470f0e0dd5528f47c81"
 }