@textbus/platform-browser 3.0.1 → 3.0.3

package/bundles/_utils/env.d.ts

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

package/bundles/core/dom-renderer.d.ts

@@ -28,7 +28,8 @@ export declare class DomRenderer implements NativeRenderer {
         xlinktype: string;
         'xlink:type': string;
     };
-    formElement: Record<string, string[]>;
+    booleanProps: Record<string, string[]>;
+    valueProps: Record<string, string[]>;
     listen<T = any>(node: NativeNode, type: string, callback: (ev: T) => any): void;
     unListen(node: NativeNode, type: string, callback: (ev: any) => any): void;
     createTextNode(textContent: string): NativeNode;

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

@@ -1,6 +1,6 @@
 import { Injector } from '@tanbo/di';
 import { Observable } from '@tanbo/stream';
-import { Commander, Controller, Keyboard, Scheduler, Selection } from '@textbus/core';
+import { Commander, Controller, Keyboard, Renderer, Scheduler, Selection } from '@textbus/core';
 import { Caret, CaretPosition, CompositionState, Input, Scroller } from './types';
 import { Parser } from '../dom-support/parser';
 declare class NativeCaret implements Caret {
@@ -29,6 +29,7 @@ export declare class NativeInput extends Input {
     private scheduler;
     private selection;
     private keyboard;
+    private renderer;
     private commander;
     private controller;
     caret: NativeCaret;
@@ -44,8 +45,9 @@ export declare class NativeInput extends Input {
     private nativeRange;
     private isSafari;
     private isMac;
+    private isMobileBrowser;
     private isSougouPinYin;
-    constructor(injector: Injector, parser: Parser, scheduler: Scheduler, selection: Selection, keyboard: Keyboard, commander: Commander, controller: Controller);
+    constructor(injector: Injector, parser: Parser, scheduler: Scheduler, selection: Selection, keyboard: Keyboard, renderer: Renderer, commander: Commander, controller: Controller);
     focus(nativeRange: Range): void;
     blur(): void;
     destroy(): void;

package/bundles/index.esm.js

@@ -102,6 +102,7 @@ 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);
+const isMobileBrowser = () => /Android|iPhone|iPad/.test(navigator.userAgent);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1118,14 +1119,20 @@ let DomRenderer = DomRenderer_1 = class DomRenderer {
             xlinktype: 'xlink:type',
             'xlink:type': 'xlink:type'
         };
-        this.formElement = {
-            input: ['disabled', 'readonly', 'value'],
+        this.booleanProps = {
+            input: ['disabled', 'readonly'],
             select: ['disabled', 'readonly'],
-            option: ['disabled', 'selected', 'value'],
+            option: ['disabled', 'selected'],
             button: ['disabled'],
             video: ['controls', 'autoplay', 'loop', 'muted'],
             audio: ['controls', 'autoplay', 'loop', 'muted'],
         };
+        this.valueProps = {
+            input: ['value'],
+            option: ['value'],
+            video: ['src'],
+            audio: ['src']
+        };
     }
     listen(node, type, callback) {
         node.addEventListener(type, callback);
@@ -1179,20 +1186,30 @@ let DomRenderer = DomRenderer_1 = class DomRenderer {
             return;
         }
         target.setAttribute(key, value);
-        const propNames = this.formElement[target.tagName.toLowerCase()];
-        if (propNames && propNames.includes(key)) {
+        const tag = target.tagName.toLowerCase();
+        const booleanTagNames = this.booleanProps[tag];
+        const valueTagNames = this.valueProps[tag];
+        if (booleanTagNames && booleanTagNames.includes(key)) {
             target[key] = Boolean(value);
         }
+        if (valueTagNames && valueTagNames.includes(key)) {
+            target[key] = value;
+        }
     }
     removeAttribute(target, key) {
         if (this.possibleXlinkNames[key]) {
             this.removeXlinkAttribute(target, this.possibleXlinkNames[key]);
         }
         target.removeAttribute(key);
-        const propNames = this.formElement[target.tagName.toLowerCase()];
-        if (propNames && propNames.includes(key)) {
+        const tag = target.tagName.toLowerCase();
+        const booleanTagNames = this.booleanProps[tag];
+        const valueTagNames = this.valueProps[tag];
+        if (booleanTagNames && booleanTagNames.includes(key)) {
             target[key] = false;
         }
+        if (valueTagNames && valueTagNames.includes(key)) {
+            target[key] = '';
+        }
     }
     setXlinkAttribute(target, key, value) {
         target.setAttributeNS(this.xlinkNameSpace, key, value);
@@ -1986,13 +2003,14 @@ let NativeInput = class NativeInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(injector, parser, scheduler, selection, keyboard, commander, controller) {
+    constructor(injector, parser, scheduler, selection, keyboard, renderer, commander, controller) {
         super();
         this.injector = injector;
         this.parser = parser;
         this.scheduler = scheduler;
         this.selection = selection;
         this.keyboard = keyboard;
+        this.renderer = renderer;
         this.commander = commander;
         this.controller = controller;
         this.caret = new NativeCaret(this.scheduler);
@@ -2005,6 +2023,7 @@ let NativeInput = class NativeInput extends Input {
         this.nativeRange = null;
         this.isSafari = isSafari();
         this.isMac = isMac();
+        this.isMobileBrowser = isMobileBrowser();
         this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
         this.documentView = injector.get(VIEW_DOCUMENT);
         if (!controller.readonly) {
@@ -2163,15 +2182,41 @@ let NativeInput = class NativeInput extends Input {
                 data: ev.data
             });
             invokeListener(startSlot.parent, 'onCompositionUpdate', event);
-        }), merge(fromEvent(input, 'beforeinput').pipe(filter(ev => {
+        }), merge(fromEvent(input, 'beforeinput').pipe(map(ev => {
+            var _a;
             ev.preventDefault();
+            if (ev.inputType === 'insertCompositionText') {
+                return null;
+            }
+            if (ev.inputType === 'insertReplacementText') {
+                const range = ev.getTargetRanges()[0];
+                const location = this.renderer.getLocationByNativeNode(range.startContainer);
+                const startSlot = this.selection.startSlot;
+                this.selection.setBaseAndExtent(startSlot, location.startIndex + range.startOffset, startSlot, location.startIndex + range.endOffset);
+                this.commander.delete();
+                return ((_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text')) || ev.data || null;
+            }
+            isCompositionEnd = ev.inputType === 'insertFromComposition';
+            if (isCompositionEnd && this.composition) {
+                if (this.isMobileBrowser) {
+                    this.composition = false;
+                    this.compositionState = null;
+                }
+                else {
+                    return null;
+                }
+            }
             if (this.isSafari) {
-                isCompositionEnd = ev.inputType === 'insertFromComposition';
-                return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition';
+                if (ev.inputType === 'insertText' || isCompositionEnd) {
+                    return ev.data;
+                }
             }
-            return !ev.isComposing && !!ev.data;
-        }), map(ev => {
-            return ev.data;
+            if (!ev.isComposing && !!ev.data) {
+                return ev.data;
+            }
+            return null;
+        }), filter(text => {
+            return text;
         })), this.isSafari ? new Observable() : fromEvent(input, 'compositionend').pipe(map(ev => {
             isCompositionEnd = true;
             ev.preventDefault();
@@ -2204,6 +2249,7 @@ NativeInput = __decorate([
         Scheduler,
         Selection,
         Keyboard,
+        Renderer,
         Commander,
         Controller])
 ], NativeInput);
@@ -2787,4 +2833,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, isFirefox, 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, isMobileBrowser, isSafari, isWindows };

package/bundles/index.js

@@ -104,6 +104,7 @@ 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);
+const isMobileBrowser = () => /Android|iPhone|iPad/.test(navigator.userAgent);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1120,14 +1121,20 @@ exports.DomRenderer = DomRenderer_1 = class DomRenderer {
             xlinktype: 'xlink:type',
             'xlink:type': 'xlink:type'
         };
-        this.formElement = {
-            input: ['disabled', 'readonly', 'value'],
+        this.booleanProps = {
+            input: ['disabled', 'readonly'],
             select: ['disabled', 'readonly'],
-            option: ['disabled', 'selected', 'value'],
+            option: ['disabled', 'selected'],
             button: ['disabled'],
             video: ['controls', 'autoplay', 'loop', 'muted'],
             audio: ['controls', 'autoplay', 'loop', 'muted'],
         };
+        this.valueProps = {
+            input: ['value'],
+            option: ['value'],
+            video: ['src'],
+            audio: ['src']
+        };
     }
     listen(node, type, callback) {
         node.addEventListener(type, callback);
@@ -1181,20 +1188,30 @@ exports.DomRenderer = DomRenderer_1 = class DomRenderer {
             return;
         }
         target.setAttribute(key, value);
-        const propNames = this.formElement[target.tagName.toLowerCase()];
-        if (propNames && propNames.includes(key)) {
+        const tag = target.tagName.toLowerCase();
+        const booleanTagNames = this.booleanProps[tag];
+        const valueTagNames = this.valueProps[tag];
+        if (booleanTagNames && booleanTagNames.includes(key)) {
             target[key] = Boolean(value);
         }
+        if (valueTagNames && valueTagNames.includes(key)) {
+            target[key] = value;
+        }
     }
     removeAttribute(target, key) {
         if (this.possibleXlinkNames[key]) {
             this.removeXlinkAttribute(target, this.possibleXlinkNames[key]);
         }
         target.removeAttribute(key);
-        const propNames = this.formElement[target.tagName.toLowerCase()];
-        if (propNames && propNames.includes(key)) {
+        const tag = target.tagName.toLowerCase();
+        const booleanTagNames = this.booleanProps[tag];
+        const valueTagNames = this.valueProps[tag];
+        if (booleanTagNames && booleanTagNames.includes(key)) {
             target[key] = false;
         }
+        if (valueTagNames && valueTagNames.includes(key)) {
+            target[key] = '';
+        }
     }
     setXlinkAttribute(target, key, value) {
         target.setAttributeNS(this.xlinkNameSpace, key, value);
@@ -1988,13 +2005,14 @@ exports.NativeInput = class NativeInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(injector, parser, scheduler, selection, keyboard, commander, controller) {
+    constructor(injector, parser, scheduler, selection, keyboard, renderer, commander, controller) {
         super();
         this.injector = injector;
         this.parser = parser;
         this.scheduler = scheduler;
         this.selection = selection;
         this.keyboard = keyboard;
+        this.renderer = renderer;
         this.commander = commander;
         this.controller = controller;
         this.caret = new NativeCaret(this.scheduler);
@@ -2007,6 +2025,7 @@ exports.NativeInput = class NativeInput extends Input {
         this.nativeRange = null;
         this.isSafari = isSafari();
         this.isMac = isMac();
+        this.isMobileBrowser = isMobileBrowser();
         this.isSougouPinYin = false; // 有 bug 版本搜狗拼音
         this.documentView = injector.get(VIEW_DOCUMENT);
         if (!controller.readonly) {
@@ -2165,15 +2184,41 @@ exports.NativeInput = class NativeInput extends Input {
                 data: ev.data
             });
             core.invokeListener(startSlot.parent, 'onCompositionUpdate', event);
-        }), stream.merge(stream.fromEvent(input, 'beforeinput').pipe(stream.filter(ev => {
+        }), stream.merge(stream.fromEvent(input, 'beforeinput').pipe(stream.map(ev => {
+            var _a;
             ev.preventDefault();
+            if (ev.inputType === 'insertCompositionText') {
+                return null;
+            }
+            if (ev.inputType === 'insertReplacementText') {
+                const range = ev.getTargetRanges()[0];
+                const location = this.renderer.getLocationByNativeNode(range.startContainer);
+                const startSlot = this.selection.startSlot;
+                this.selection.setBaseAndExtent(startSlot, location.startIndex + range.startOffset, startSlot, location.startIndex + range.endOffset);
+                this.commander.delete();
+                return ((_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text')) || ev.data || null;
+            }
+            isCompositionEnd = ev.inputType === 'insertFromComposition';
+            if (isCompositionEnd && this.composition) {
+                if (this.isMobileBrowser) {
+                    this.composition = false;
+                    this.compositionState = null;
+                }
+                else {
+                    return null;
+                }
+            }
             if (this.isSafari) {
-                isCompositionEnd = ev.inputType === 'insertFromComposition';
-                return ev.inputType === 'insertText' || ev.inputType === 'insertFromComposition';
+                if (ev.inputType === 'insertText' || isCompositionEnd) {
+                    return ev.data;
+                }
             }
-            return !ev.isComposing && !!ev.data;
-        }), stream.map(ev => {
-            return ev.data;
+            if (!ev.isComposing && !!ev.data) {
+                return ev.data;
+            }
+            return null;
+        }), stream.filter(text => {
+            return text;
         })), this.isSafari ? new stream.Observable() : stream.fromEvent(input, 'compositionend').pipe(stream.map(ev => {
             isCompositionEnd = true;
             ev.preventDefault();
@@ -2206,6 +2251,7 @@ exports.NativeInput = __decorate([
         core.Scheduler,
         core.Selection,
         core.Keyboard,
+        core.Renderer,
         core.Commander,
         core.Controller])
 ], exports.NativeInput);
@@ -2801,5 +2847,6 @@ exports.createTextNode = createTextNode;
 exports.getLayoutRectByRange = getLayoutRectByRange;
 exports.isFirefox = isFirefox;
 exports.isMac = isMac;
+exports.isMobileBrowser = isMobileBrowser;
 exports.isSafari = isSafari;
 exports.isWindows = isWindows;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "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": "a74f952c6e72e51005208e0b79921007e11bb6b0"
+  "gitHead": "8087ffa86e0db3b8be429308ce81a3739b36fec6"
 }