@textbus/platform-browser 3.0.0-alpha.57 → 3.0.0-alpha.59

package/bundles/_utils/env.d.ts

@@ -1,3 +1,4 @@
 export declare const isWindows: () => boolean;
 export declare const isMac: () => boolean;
 export declare const isSafari: () => boolean;
+export declare const isFirefox: () => boolean;

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

@@ -1,18 +1,13 @@
 import { Observable } from '@tanbo/stream';
 import { Injector } from '@tanbo/di';
-import { Commander, Controller, Keyboard, Scheduler, Selection, Slot } from '@textbus/core';
+import { Commander, Controller, Keyboard, Scheduler, Selection } from '@textbus/core';
 import { Parser } from '../dom-support/parser';
-import { Caret, CaretPosition, Input, Scroller } from './types';
+import { Caret, CaretPosition, CompositionState, Input, Scroller } from './types';
 interface CaretStyle {
     height: string;
     lineHeight: string;
     fontSize: string;
 }
-interface CompositionState {
-    slot: Slot;
-    index: number;
-    data: string;
-}
 declare class ExperimentalCaret implements Caret {
     private scheduler;
     private editorMask;
@@ -54,11 +49,13 @@ export declare class MagicInput extends Input {
     private scheduler;
     private injector;
     composition: boolean;
+    compositionState: CompositionState | null;
     onReady: Promise<void>;
     caret: ExperimentalCaret;
     set disabled(b: boolean);
     get disabled(): boolean;
     private isSafari;
+    private isFirefox;
     private isMac;
     private isWindows;
     private _disabled;

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

@@ -1,7 +1,7 @@
 import { Injector } from '@tanbo/di';
 import { Observable } from '@tanbo/stream';
 import { Commander, Controller, Keyboard, Scheduler, Selection } from '@textbus/core';
-import { Caret, CaretPosition, Input, Scroller } from './types';
+import { Caret, CaretPosition, CompositionState, Input, Scroller } from './types';
 import { Parser } from '../dom-support/parser';
 declare class NativeCaret implements Caret {
     private scheduler;
@@ -33,6 +33,7 @@ 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/core/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentLiteral, Module, TextbusConfig } from '@textbus/core';
+import { ComponentLiteral, Module, Slot, TextbusConfig } from '@textbus/core';
 import { Observable } from '@tanbo/stream';
 import { FormatLoader, ComponentLoader, AttributeLoader } from '../dom-support/parser';
 import { Rect } from '../_utils/uikit';
@@ -51,8 +51,14 @@ 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 {
     abstract composition: boolean;
+    abstract compositionState: CompositionState | null;
     abstract onReady: Promise<void>;
     abstract caret: Caret;
     abstract disabled: boolean;

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, Scheduler, Slot, ContentType, Keyboard, Commander, makeError, Starter, NativeRenderer, NativeSelectionBridge, OutputRenderer, Registry, invokeListener, History } from '@textbus/core';
+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';
 
 function createElement(tagName, options = {}) {
@@ -101,6 +101,7 @@ function getLayoutRectByRange(range) {
 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);
+const isFirefox = () => /Firefox/.test(navigator.userAgent);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1584,8 +1585,10 @@ let MagicInput = class MagicInput extends Input {
         this.scheduler = scheduler;
         this.injector = injector;
         this.composition = false;
+        this.compositionState = null;
         this.caret = new ExperimentalCaret(this.scheduler, this.injector.get(VIEW_MASK));
         this.isSafari = isSafari();
+        this.isFirefox = isFirefox();
         this.isMac = isMac();
         this.isWindows = isWindows();
         this._disabled = false;
@@ -1714,7 +1717,10 @@ let MagicInput = class MagicInput extends Input {
             this.doc.body.appendChild(div);
             div.focus();
             setTimeout(() => {
-                const html = div.innerHTML;
+                let html = div.innerHTML;
+                if (!html && text && this.isFirefox) {
+                    html = text;
+                }
                 this.handlePaste(html, text);
                 this.doc.body.removeChild(div);
             });
@@ -1769,32 +1775,47 @@ let MagicInput = class MagicInput extends Input {
     handleInput(textarea) {
         let startIndex = 0;
         this.subscription.add(fromEvent(textarea, 'compositionstart').subscribe(() => {
+            this.composition = true;
+            this.caret.compositionState = this.compositionState = null;
             startIndex = this.selection.startOffset;
+            const startSlot = this.selection.startSlot;
+            const event = new Event(startSlot, {
+                index: startIndex
+            });
+            invokeListener(startSlot.parent, 'onCompositionStart', event);
         }), fromEvent(textarea, 'compositionupdate').subscribe(ev => {
             if (ev.data === ' ') {
                 // 处理搜狗五笔不符合 composition 事件预期，会意外跳光标的问题
                 return;
             }
-            this.caret.compositionState = {
-                slot: this.selection.startSlot,
+            const startSlot = this.selection.startSlot;
+            this.caret.compositionState = this.compositionState = {
+                slot: startSlot,
                 index: startIndex,
                 data: ev.data
             };
             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);
+            const event = new Event(startSlot, {
+                index: startIndex,
+                data: ev.data
+            });
+            invokeListener(startSlot.parent, 'onCompositionUpdate', event);
         }));
+        let isCompositionEnd = false;
         this.subscription.add(merge(fromEvent(textarea, 'beforeinput').pipe(filter(ev => {
             ev.preventDefault();
+            if (this.isFirefox && ev.inputType === 'insertFromPaste') {
+                return false;
+            }
             if (this.isSafari) {
+                isCompositionEnd = ev.inputType === 'insertFromComposition';
                 return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition';
             }
             return !ev.isComposing && !!ev.data;
         }), map(ev => {
             return ev.data;
         })), this.isSafari ? new Observable() : fromEvent(textarea, 'compositionend').pipe(map(ev => {
+            isCompositionEnd = true;
             ev.preventDefault();
             textarea.value = '';
             return ev.data;
@@ -1803,9 +1824,21 @@ let MagicInput = class MagicInput extends Input {
             this.isSougouPinYin = false;
             return !b;
         }))).subscribe(text => {
+            var _a;
+            this.composition = false;
+            this.caret.compositionState = this.compositionState = null;
+            (_a = this.caret.compositionElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.caret.compositionElement);
             if (text) {
                 this.commander.write(text);
             }
+            if (isCompositionEnd) {
+                const startSlot = this.selection.startSlot;
+                if (startSlot) {
+                    const event = new Event(startSlot, null);
+                    invokeListener(startSlot.parent, 'onCompositionEnd', event);
+                }
+            }
+            isCompositionEnd = false;
         }));
     }
     createEditableFrame() {
@@ -1958,6 +1991,7 @@ let NativeInput = class NativeInput extends Input {
         this.controller = controller;
         this.caret = new NativeCaret(this.scheduler);
         this.composition = false;
+        this.compositionState = null;
         this.onReady = Promise.resolve();
         this._disabled = false;
         this.nativeSelection = document.getSelection();
@@ -2100,17 +2134,40 @@ let NativeInput = class NativeInput extends Input {
         }));
     }
     handleInput(input) {
+        let startIndex = 0;
+        let isCompositionEnd = false;
         this.subscription.add(fromEvent(input, 'compositionstart').subscribe(() => {
             this.composition = true;
+            this.compositionState = null;
+            startIndex = this.selection.startOffset;
+            const startSlot = this.selection.startSlot;
+            const event = new Event(startSlot, {
+                index: startIndex
+            });
+            invokeListener(startSlot.parent, 'onCompositionStart', event);
+        }), fromEvent(input, 'compositionupdate').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
+            });
+            invokeListener(startSlot.parent, 'onCompositionUpdate', event);
         }), merge(fromEvent(input, 'beforeinput').pipe(filter(ev => {
             ev.preventDefault();
             if (this.isSafari) {
+                isCompositionEnd = ev.inputType === 'insertFromComposition';
                 return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition';
             }
             return !ev.isComposing && !!ev.data;
         }), map(ev => {
             return ev.data;
         })), this.isSafari ? new Observable() : fromEvent(input, 'compositionend').pipe(map(ev => {
+            isCompositionEnd = true;
             ev.preventDefault();
             return ev.data;
         }), filter(() => {
@@ -2119,9 +2176,18 @@ let NativeInput = class NativeInput extends Input {
             return !b;
         }))).subscribe(text => {
             this.composition = false;
+            this.compositionState = null;
             if (text) {
                 this.commander.write(text);
             }
+            if (isCompositionEnd) {
+                const startSlot = this.selection.startSlot;
+                if (startSlot) {
+                    const event = new Event(startSlot, null);
+                    invokeListener(startSlot.parent, 'onCompositionEnd', event);
+                }
+            }
+            isCompositionEnd = false;
         }));
     }
 };
@@ -2715,4 +2781,4 @@ class Viewer extends Starter {
     }
 }
 
-export { CollaborateCursor, CollaborateSelectionAwarenessDelegate, DomRenderer, EDITOR_OPTIONS, Input, MagicInput, NativeInput, OutputTranslator, Parser, SelectionBridge, VIEW_CONTAINER, VIEW_DOCUMENT, VIEW_MASK, Viewer, createElement, createTextNode, getLayoutRectByRange, isMac, isSafari, isWindows };
+export { CollaborateCursor, CollaborateSelectionAwarenessDelegate, DomRenderer, EDITOR_OPTIONS, Input, MagicInput, NativeInput, OutputTranslator, Parser, SelectionBridge, VIEW_CONTAINER, VIEW_DOCUMENT, VIEW_MASK, Viewer, createElement, createTextNode, getLayoutRectByRange, isFirefox, isMac, isSafari, isWindows };

package/bundles/index.js

@@ -103,6 +103,7 @@ function getLayoutRectByRange(range) {
 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);
+const isFirefox = () => /Firefox/.test(navigator.userAgent);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1586,8 +1587,10 @@ exports.MagicInput = class MagicInput extends Input {
         this.scheduler = scheduler;
         this.injector = injector;
         this.composition = false;
+        this.compositionState = null;
         this.caret = new ExperimentalCaret(this.scheduler, this.injector.get(VIEW_MASK));
         this.isSafari = isSafari();
+        this.isFirefox = isFirefox();
         this.isMac = isMac();
         this.isWindows = isWindows();
         this._disabled = false;
@@ -1716,7 +1719,10 @@ exports.MagicInput = class MagicInput extends Input {
             this.doc.body.appendChild(div);
             div.focus();
             setTimeout(() => {
-                const html = div.innerHTML;
+                let html = div.innerHTML;
+                if (!html && text && this.isFirefox) {
+                    html = text;
+                }
                 this.handlePaste(html, text);
                 this.doc.body.removeChild(div);
             });
@@ -1771,32 +1777,47 @@ exports.MagicInput = class MagicInput extends Input {
     handleInput(textarea) {
         let startIndex = 0;
         this.subscription.add(stream.fromEvent(textarea, 'compositionstart').subscribe(() => {
+            this.composition = true;
+            this.caret.compositionState = this.compositionState = null;
             startIndex = this.selection.startOffset;
+            const startSlot = this.selection.startSlot;
+            const event = new core.Event(startSlot, {
+                index: startIndex
+            });
+            core.invokeListener(startSlot.parent, 'onCompositionStart', event);
         }), stream.fromEvent(textarea, 'compositionupdate').subscribe(ev => {
             if (ev.data === ' ') {
                 // 处理搜狗五笔不符合 composition 事件预期，会意外跳光标的问题
                 return;
             }
-            this.caret.compositionState = {
-                slot: this.selection.startSlot,
+            const startSlot = this.selection.startSlot;
+            this.caret.compositionState = this.compositionState = {
+                slot: startSlot,
                 index: startIndex,
                 data: ev.data
             };
             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);
+            const event = new core.Event(startSlot, {
+                index: startIndex,
+                data: ev.data
+            });
+            core.invokeListener(startSlot.parent, 'onCompositionUpdate', event);
         }));
+        let isCompositionEnd = false;
         this.subscription.add(stream.merge(stream.fromEvent(textarea, 'beforeinput').pipe(stream.filter(ev => {
             ev.preventDefault();
+            if (this.isFirefox && ev.inputType === 'insertFromPaste') {
+                return false;
+            }
             if (this.isSafari) {
+                isCompositionEnd = ev.inputType === 'insertFromComposition';
                 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 => {
+            isCompositionEnd = true;
             ev.preventDefault();
             textarea.value = '';
             return ev.data;
@@ -1805,9 +1826,21 @@ exports.MagicInput = class MagicInput extends Input {
             this.isSougouPinYin = false;
             return !b;
         }))).subscribe(text => {
+            var _a;
+            this.composition = false;
+            this.caret.compositionState = this.compositionState = null;
+            (_a = this.caret.compositionElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.caret.compositionElement);
             if (text) {
                 this.commander.write(text);
             }
+            if (isCompositionEnd) {
+                const startSlot = this.selection.startSlot;
+                if (startSlot) {
+                    const event = new core.Event(startSlot, null);
+                    core.invokeListener(startSlot.parent, 'onCompositionEnd', event);
+                }
+            }
+            isCompositionEnd = false;
         }));
     }
     createEditableFrame() {
@@ -1960,6 +1993,7 @@ exports.NativeInput = class NativeInput extends Input {
         this.controller = controller;
         this.caret = new NativeCaret(this.scheduler);
         this.composition = false;
+        this.compositionState = null;
         this.onReady = Promise.resolve();
         this._disabled = false;
         this.nativeSelection = document.getSelection();
@@ -2102,17 +2136,40 @@ exports.NativeInput = class NativeInput extends Input {
         }));
     }
     handleInput(input) {
+        let startIndex = 0;
+        let isCompositionEnd = false;
         this.subscription.add(stream.fromEvent(input, 'compositionstart').subscribe(() => {
             this.composition = true;
+            this.compositionState = null;
+            startIndex = this.selection.startOffset;
+            const startSlot = this.selection.startSlot;
+            const event = new core.Event(startSlot, {
+                index: startIndex
+            });
+            core.invokeListener(startSlot.parent, 'onCompositionStart', event);
+        }), stream.fromEvent(input, 'compositionupdate').subscribe(ev => {
+            const startSlot = this.selection.startSlot;
+            this.compositionState = {
+                slot: startSlot,
+                index: startIndex,
+                data: ev.data
+            };
+            const event = new core.Event(startSlot, {
+                index: startIndex,
+                data: ev.data
+            });
+            core.invokeListener(startSlot.parent, 'onCompositionUpdate', event);
         }), stream.merge(stream.fromEvent(input, 'beforeinput').pipe(stream.filter(ev => {
             ev.preventDefault();
             if (this.isSafari) {
+                isCompositionEnd = ev.inputType === 'insertFromComposition';
                 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(input, 'compositionend').pipe(stream.map(ev => {
+            isCompositionEnd = true;
             ev.preventDefault();
             return ev.data;
         }), stream.filter(() => {
@@ -2121,9 +2178,18 @@ exports.NativeInput = class NativeInput extends Input {
             return !b;
         }))).subscribe(text => {
             this.composition = false;
+            this.compositionState = null;
             if (text) {
                 this.commander.write(text);
             }
+            if (isCompositionEnd) {
+                const startSlot = this.selection.startSlot;
+                if (startSlot) {
+                    const event = new core.Event(startSlot, null);
+                    core.invokeListener(startSlot.parent, 'onCompositionEnd', event);
+                }
+            }
+            isCompositionEnd = false;
         }));
     }
 };
@@ -2727,6 +2793,7 @@ exports.Viewer = Viewer;
 exports.createElement = createElement;
 exports.createTextNode = createTextNode;
 exports.getLayoutRectByRange = getLayoutRectByRange;
+exports.isFirefox = isFirefox;
 exports.isMac = isMac;
 exports.isSafari = isSafari;
 exports.isWindows = isWindows;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "3.0.0-alpha.57",
+  "version": "3.0.0-alpha.59",
   "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.57",
+    "@textbus/core": "^3.0.0-alpha.59",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "e81f54ea137de6299f90f14c1c7fd7c933e68f11"
+  "gitHead": "7b4fd0eb4680416ddf112c8cec1432ea51919d19"
 }