@textbus/platform-browser 3.0.0 → 3.0.2

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;
@@ -48,5 +49,5 @@ export declare class DomRenderer implements NativeRenderer {
     removeXlinkAttribute(target: NativeNode, key: string): void;
     replace(newChild: NativeNode, oldChild: NativeNode): void;
     copy(): void;
-    static replaceEmpty(s: string, target: string): string;
+    static replaceEmpty(s: string): string;
 }

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;
@@ -45,7 +46,7 @@ export declare class NativeInput extends Input {
     private isSafari;
     private isMac;
     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

@@ -1118,14 +1118,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);
@@ -1134,7 +1140,7 @@ let DomRenderer = DomRenderer_1 = class DomRenderer {
         node.removeEventListener(type, callback);
     }
     createTextNode(textContent) {
-        return document.createTextNode(DomRenderer_1.replaceEmpty(textContent, '\u00a0'));
+        return document.createTextNode(DomRenderer_1.replaceEmpty(textContent));
     }
     createElement(name) {
         if (this.isSVG.test(name)) {
@@ -1165,8 +1171,9 @@ let DomRenderer = DomRenderer_1 = class DomRenderer {
         target.style[key] = value !== null && value !== void 0 ? value : '';
     }
     syncTextContent(target, content) {
-        if (target.textContent !== content) {
-            target.textContent = content;
+        const c = DomRenderer_1.replaceEmpty(content);
+        if (target.textContent !== c) {
+            target.textContent = c;
         }
     }
     removeStyle(target, key) {
@@ -1178,20 +1185,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);
@@ -1205,12 +1222,13 @@ let DomRenderer = DomRenderer_1 = class DomRenderer {
     copy() {
         document.execCommand('copy');
     }
-    static replaceEmpty(s, target) {
+    static replaceEmpty(s) {
+        const empty = '\u00a0';
         return s.replace(/\s\s+/g, str => {
             return ' ' + Array.from({
                 length: str.length - 1
-            }).fill(target).join('');
-        }).replace(/^\s|\s$/g, target);
+            }).fill(empty).join('');
+        }).replace(/^\s|\s$/g, empty);
     }
 };
 DomRenderer = DomRenderer_1 = __decorate([
@@ -1984,13 +2002,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);
@@ -2161,15 +2180,35 @@ 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) {
+                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();
@@ -2202,6 +2241,7 @@ NativeInput = __decorate([
         Scheduler,
         Selection,
         Keyboard,
+        Renderer,
         Commander,
         Controller])
 ], NativeInput);

package/bundles/index.js

@@ -1120,14 +1120,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);
@@ -1136,7 +1142,7 @@ exports.DomRenderer = DomRenderer_1 = class DomRenderer {
         node.removeEventListener(type, callback);
     }
     createTextNode(textContent) {
-        return document.createTextNode(DomRenderer_1.replaceEmpty(textContent, '\u00a0'));
+        return document.createTextNode(DomRenderer_1.replaceEmpty(textContent));
     }
     createElement(name) {
         if (this.isSVG.test(name)) {
@@ -1167,8 +1173,9 @@ exports.DomRenderer = DomRenderer_1 = class DomRenderer {
         target.style[key] = value !== null && value !== void 0 ? value : '';
     }
     syncTextContent(target, content) {
-        if (target.textContent !== content) {
-            target.textContent = content;
+        const c = DomRenderer_1.replaceEmpty(content);
+        if (target.textContent !== c) {
+            target.textContent = c;
         }
     }
     removeStyle(target, key) {
@@ -1180,20 +1187,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);
@@ -1207,12 +1224,13 @@ exports.DomRenderer = DomRenderer_1 = class DomRenderer {
     copy() {
         document.execCommand('copy');
     }
-    static replaceEmpty(s, target) {
+    static replaceEmpty(s) {
+        const empty = '\u00a0';
         return s.replace(/\s\s+/g, str => {
             return ' ' + Array.from({
                 length: str.length - 1
-            }).fill(target).join('');
-        }).replace(/^\s|\s$/g, target);
+            }).fill(empty).join('');
+        }).replace(/^\s|\s$/g, empty);
     }
 };
 exports.DomRenderer = DomRenderer_1 = __decorate([
@@ -1986,13 +2004,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);
@@ -2163,15 +2182,35 @@ 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) {
+                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();
@@ -2204,6 +2243,7 @@ exports.NativeInput = __decorate([
         core.Scheduler,
         core.Selection,
         core.Keyboard,
+        core.Renderer,
         core.Commander,
         core.Controller])
 ], exports.NativeInput);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "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": "1a8732460b4e218117d176277bc18021c90779dc"
+  "gitHead": "01d6397297fa0999b4ef6ffef3ae36b37118ad44"
 }