@textbus/platform-browser 3.8.2 → 3.8.4

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

@@ -73,7 +73,9 @@ export declare class MagicInput extends Input {
     destroy(): void;
     private init;
     private handleDefaultActions;
-    private handlePaste;
+    copyHandler(ev: ClipboardEvent): void;
+    pasteHandler(ev: ClipboardEvent): void;
+    private paste;
     private handleShortcut;
     private handleInput;
     private createEditableFrame;

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

@@ -47,7 +47,9 @@ export declare class NativeInput extends Input {
     blur(): void;
     destroy(): void;
     private handleDefaultActions;
-    private handlePaste;
+    copyHandler(ev: ClipboardEvent): void;
+    pasteHandler(ev: ClipboardEvent): void;
+    private paste;
     private handleShortcut;
     private handleInput;
     private handleMobileInput;

package/bundles/core/selection-bridge.d.ts

@@ -8,8 +8,6 @@ import { Input, ViewOptions } from './types';
  */
 export declare class SelectionBridge implements NativeSelectionBridge {
     private config;
-    private injector;
-    private controller;
     private selection;
     private rootComponentRef;
     private input;
@@ -24,7 +22,6 @@ export declare class SelectionBridge implements NativeSelectionBridge {
     private ignoreSelectionChange;
     private changeFromUser;
     private docContainer;
-    private maskContainer;
     private cacheCaretPositionTimer;
     private oldCaretPosition;
     constructor(config: ViewOptions, injector: Injector, controller: Controller, selection: Selection, rootComponentRef: RootComponentRef, input: Input, renderer: Renderer);

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, History, Registry } from '@textbus/core';
-import { Subject, filter, fromEvent, Subscription, distinctUntilChanged, merge, map, Observable } from '@tanbo/stream';
+import { Subject, filter, fromEvent, delay, Subscription, distinctUntilChanged, merge, map, Observable } from '@tanbo/stream';
 
 function createElement(tagName, options = {}) {
     const el = document.createElement(tagName);
@@ -177,8 +177,6 @@ class Input {
 let SelectionBridge = class SelectionBridge {
     constructor(config, injector, controller, selection, rootComponentRef, input, renderer) {
         this.config = config;
-        this.injector = injector;
-        this.controller = controller;
         this.selection = selection;
         this.rootComponentRef = rootComponentRef;
         this.input = input;
@@ -191,7 +189,6 @@ let SelectionBridge = class SelectionBridge {
         this.ignoreSelectionChange = false;
         this.changeFromUser = false;
         this.docContainer = injector.get(VIEW_DOCUMENT);
-        this.maskContainer = injector.get(VIEW_MASK);
         this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(filter(() => {
             return !controller.readonly;
         }));
@@ -498,7 +495,15 @@ let SelectionBridge = class SelectionBridge {
                 }
             }));
         }
-        this.subs.push(fromEvent(document, 'selectionchange').pipe().subscribe(() => {
+        let isUpdating = false;
+        this.subs.push(this.renderer.onViewUpdateBefore.subscribe(() => {
+            isUpdating = true;
+        }), this.renderer.onViewUpdated.pipe(delay()).subscribe(() => {
+            isUpdating = false;
+        }), fromEvent(document, 'selectionchange').subscribe(() => {
+            if (isUpdating) {
+                return;
+            }
             this.syncSelection(connector);
         }));
     }
@@ -1736,61 +1741,67 @@ let MagicInput = class MagicInput extends Input {
     }
     handleDefaultActions(textarea) {
         this.subscription.add(fromEvent(isFirefox() ? textarea : document, 'copy').subscribe(ev => {
-            const selection = this.selection;
-            if (!selection.isSelected) {
-                return;
-            }
-            if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
-                const content = selection.startSlot.getContentAtIndex(selection.startOffset);
-                if (typeof content === 'object') {
-                    const clipboardData = ev.clipboardData;
-                    const nativeSelection = document.getSelection();
-                    const range = nativeSelection.getRangeAt(0);
-                    const div = document.createElement('div');
-                    const fragment = range.cloneContents();
-                    div.append(fragment);
-                    clipboardData.setData('text/html', div.innerHTML);
-                    clipboardData.setData('text', div.innerText);
-                    ev.preventDefault();
-                }
-            }
+            this.copyHandler(ev);
         }), fromEvent(textarea, 'paste').subscribe(ev => {
-            const text = ev.clipboardData.getData('Text');
-            const types = Array.from(ev.clipboardData.types || []);
-            const files = Array.from(ev.clipboardData.files);
-            if (types.every(type => type === 'Files') && files.length) {
-                Promise.all(files.filter(i => {
-                    return /image/i.test(i.type);
-                }).map(item => {
-                    const reader = new FileReader();
-                    return new Promise(resolve => {
-                        reader.onload = (event) => {
-                            resolve(event.target.result);
-                        };
-                        reader.readAsDataURL(item);
-                    });
-                })).then(urls => {
-                    const html = urls.map(i => {
-                        return `<img src=${i}>`;
-                    }).join('');
-                    this.handlePaste(html, text);
-                });
+            this.pasteHandler(ev);
+        }));
+    }
+    copyHandler(ev) {
+        const selection = this.selection;
+        if (!selection.isSelected) {
+            return;
+        }
+        if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
+            const content = selection.startSlot.getContentAtIndex(selection.startOffset);
+            if (typeof content === 'object') {
+                const clipboardData = ev.clipboardData;
+                const nativeSelection = document.getSelection();
+                const range = nativeSelection.getRangeAt(0);
+                const div = document.createElement('div');
+                const fragment = range.cloneContents();
+                div.append(fragment);
+                clipboardData.setData('text/html', div.innerHTML);
+                clipboardData.setData('text', div.innerText);
                 ev.preventDefault();
-                return;
             }
-            const div = this.doc.createElement('div');
-            div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
-            div.contentEditable = 'true';
-            this.doc.body.appendChild(div);
-            div.focus();
-            setTimeout(() => {
-                this.doc.body.removeChild(div);
-                div.style.cssText = '';
-                this.handlePaste(div, text);
+        }
+    }
+    pasteHandler(ev) {
+        const text = ev.clipboardData.getData('Text');
+        const types = Array.from(ev.clipboardData.types || []);
+        const files = Array.from(ev.clipboardData.files);
+        if (types.every(type => type === 'Files') && files.length) {
+            Promise.all(files.filter(i => {
+                return /image/i.test(i.type);
+            }).map(item => {
+                const reader = new FileReader();
+                return new Promise(resolve => {
+                    reader.onload = (event) => {
+                        resolve(event.target.result);
+                    };
+                    reader.readAsDataURL(item);
+                });
+            })).then(urls => {
+                const html = urls.map(i => {
+                    return `<img src=${i}>`;
+                }).join('');
+                this.paste(html, text);
             });
-        }));
+            ev.preventDefault();
+            return;
+        }
+        const div = this.doc.createElement('div');
+        div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
+        div.contentEditable = 'true';
+        this.doc.body.appendChild(div);
+        div.focus();
+        setTimeout(() => {
+            this.doc.body.removeChild(div);
+            div.style.cssText = '';
+            this.paste(div, text);
+        });
     }
-    handlePaste(dom, text) {
+    paste(dom, text) {
         const slot = this.parser.parse(dom, new Slot([
             ContentType.BlockComponent,
             ContentType.InlineComponent,
@@ -2122,61 +2133,67 @@ let NativeInput = class NativeInput extends Input {
     }
     handleDefaultActions(textarea) {
         this.subscription.add(fromEvent(isFirefox() ? textarea : document, 'copy').subscribe(ev => {
-            const selection = this.selection;
-            if (!selection.isSelected) {
-                return;
-            }
-            if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
-                const content = selection.startSlot.getContentAtIndex(selection.startOffset);
-                if (typeof content === 'object') {
-                    const clipboardData = ev.clipboardData;
-                    const nativeSelection = document.getSelection();
-                    const range = nativeSelection.getRangeAt(0);
-                    const div = document.createElement('div');
-                    const fragment = range.cloneContents();
-                    div.append(fragment);
-                    clipboardData.setData('text/html', div.innerHTML);
-                    clipboardData.setData('text', div.innerText);
-                    ev.preventDefault();
-                }
-            }
+            this.copyHandler(ev);
         }), fromEvent(textarea, 'paste').subscribe(ev => {
-            const text = ev.clipboardData.getData('Text');
-            const types = Array.from(ev.clipboardData.types || []);
-            const files = Array.from(ev.clipboardData.files);
-            if (types.every(type => type === 'Files') && files.length) {
-                Promise.all(files.filter(i => {
-                    return /image/i.test(i.type);
-                }).map(item => {
-                    const reader = new FileReader();
-                    return new Promise(resolve => {
-                        reader.onload = (event) => {
-                            resolve(event.target.result);
-                        };
-                        reader.readAsDataURL(item);
-                    });
-                })).then(urls => {
-                    const html = urls.map(i => {
-                        return `<img src=${i}>`;
-                    }).join('');
-                    this.handlePaste(html, text);
-                });
+            this.pasteHandler(ev);
+        }));
+    }
+    copyHandler(ev) {
+        const selection = this.selection;
+        if (!selection.isSelected) {
+            return;
+        }
+        if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
+            const content = selection.startSlot.getContentAtIndex(selection.startOffset);
+            if (typeof content === 'object') {
+                const clipboardData = ev.clipboardData;
+                const nativeSelection = document.getSelection();
+                const range = nativeSelection.getRangeAt(0);
+                const div = document.createElement('div');
+                const fragment = range.cloneContents();
+                div.append(fragment);
+                clipboardData.setData('text/html', div.innerHTML);
+                clipboardData.setData('text', div.innerText);
                 ev.preventDefault();
-                return;
             }
-            const div = document.createElement('div');
-            div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
-            div.contentEditable = 'true';
-            document.body.appendChild(div);
-            div.focus();
-            setTimeout(() => {
-                document.body.removeChild(div);
-                div.style.cssText = '';
-                this.handlePaste(div, text);
+        }
+    }
+    pasteHandler(ev) {
+        const text = ev.clipboardData.getData('Text');
+        const types = Array.from(ev.clipboardData.types || []);
+        const files = Array.from(ev.clipboardData.files);
+        if (types.every(type => type === 'Files') && files.length) {
+            Promise.all(files.filter(i => {
+                return /image/i.test(i.type);
+            }).map(item => {
+                const reader = new FileReader();
+                return new Promise(resolve => {
+                    reader.onload = (event) => {
+                        resolve(event.target.result);
+                    };
+                    reader.readAsDataURL(item);
+                });
+            })).then(urls => {
+                const html = urls.map(i => {
+                    return `<img src=${i}>`;
+                }).join('');
+                this.paste(html, text);
             });
-        }));
+            ev.preventDefault();
+            return;
+        }
+        const div = document.createElement('div');
+        div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
+        div.contentEditable = 'true';
+        document.body.appendChild(div);
+        div.focus();
+        setTimeout(() => {
+            document.body.removeChild(div);
+            div.style.cssText = '';
+            this.paste(div, text);
+        });
     }
-    handlePaste(dom, text) {
+    paste(dom, text) {
         const slot = this.parser.parse(dom, new Slot([
             ContentType.BlockComponent,
             ContentType.InlineComponent,

package/bundles/index.js

@@ -179,8 +179,6 @@ class Input {
 exports.SelectionBridge = class SelectionBridge {
     constructor(config, injector, controller, selection, rootComponentRef, input, renderer) {
         this.config = config;
-        this.injector = injector;
-        this.controller = controller;
         this.selection = selection;
         this.rootComponentRef = rootComponentRef;
         this.input = input;
@@ -193,7 +191,6 @@ exports.SelectionBridge = class SelectionBridge {
         this.ignoreSelectionChange = false;
         this.changeFromUser = false;
         this.docContainer = injector.get(VIEW_DOCUMENT);
-        this.maskContainer = injector.get(VIEW_MASK);
         this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(stream.filter(() => {
             return !controller.readonly;
         }));
@@ -500,7 +497,15 @@ exports.SelectionBridge = class SelectionBridge {
                 }
             }));
         }
-        this.subs.push(stream.fromEvent(document, 'selectionchange').pipe().subscribe(() => {
+        let isUpdating = false;
+        this.subs.push(this.renderer.onViewUpdateBefore.subscribe(() => {
+            isUpdating = true;
+        }), this.renderer.onViewUpdated.pipe(stream.delay()).subscribe(() => {
+            isUpdating = false;
+        }), stream.fromEvent(document, 'selectionchange').subscribe(() => {
+            if (isUpdating) {
+                return;
+            }
             this.syncSelection(connector);
         }));
     }
@@ -1738,61 +1743,67 @@ exports.MagicInput = class MagicInput extends Input {
     }
     handleDefaultActions(textarea) {
         this.subscription.add(stream.fromEvent(isFirefox() ? textarea : document, 'copy').subscribe(ev => {
-            const selection = this.selection;
-            if (!selection.isSelected) {
-                return;
-            }
-            if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
-                const content = selection.startSlot.getContentAtIndex(selection.startOffset);
-                if (typeof content === 'object') {
-                    const clipboardData = ev.clipboardData;
-                    const nativeSelection = document.getSelection();
-                    const range = nativeSelection.getRangeAt(0);
-                    const div = document.createElement('div');
-                    const fragment = range.cloneContents();
-                    div.append(fragment);
-                    clipboardData.setData('text/html', div.innerHTML);
-                    clipboardData.setData('text', div.innerText);
-                    ev.preventDefault();
-                }
-            }
+            this.copyHandler(ev);
         }), stream.fromEvent(textarea, 'paste').subscribe(ev => {
-            const text = ev.clipboardData.getData('Text');
-            const types = Array.from(ev.clipboardData.types || []);
-            const files = Array.from(ev.clipboardData.files);
-            if (types.every(type => type === 'Files') && files.length) {
-                Promise.all(files.filter(i => {
-                    return /image/i.test(i.type);
-                }).map(item => {
-                    const reader = new FileReader();
-                    return new Promise(resolve => {
-                        reader.onload = (event) => {
-                            resolve(event.target.result);
-                        };
-                        reader.readAsDataURL(item);
-                    });
-                })).then(urls => {
-                    const html = urls.map(i => {
-                        return `<img src=${i}>`;
-                    }).join('');
-                    this.handlePaste(html, text);
-                });
+            this.pasteHandler(ev);
+        }));
+    }
+    copyHandler(ev) {
+        const selection = this.selection;
+        if (!selection.isSelected) {
+            return;
+        }
+        if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
+            const content = selection.startSlot.getContentAtIndex(selection.startOffset);
+            if (typeof content === 'object') {
+                const clipboardData = ev.clipboardData;
+                const nativeSelection = document.getSelection();
+                const range = nativeSelection.getRangeAt(0);
+                const div = document.createElement('div');
+                const fragment = range.cloneContents();
+                div.append(fragment);
+                clipboardData.setData('text/html', div.innerHTML);
+                clipboardData.setData('text', div.innerText);
                 ev.preventDefault();
-                return;
             }
-            const div = this.doc.createElement('div');
-            div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
-            div.contentEditable = 'true';
-            this.doc.body.appendChild(div);
-            div.focus();
-            setTimeout(() => {
-                this.doc.body.removeChild(div);
-                div.style.cssText = '';
-                this.handlePaste(div, text);
+        }
+    }
+    pasteHandler(ev) {
+        const text = ev.clipboardData.getData('Text');
+        const types = Array.from(ev.clipboardData.types || []);
+        const files = Array.from(ev.clipboardData.files);
+        if (types.every(type => type === 'Files') && files.length) {
+            Promise.all(files.filter(i => {
+                return /image/i.test(i.type);
+            }).map(item => {
+                const reader = new FileReader();
+                return new Promise(resolve => {
+                    reader.onload = (event) => {
+                        resolve(event.target.result);
+                    };
+                    reader.readAsDataURL(item);
+                });
+            })).then(urls => {
+                const html = urls.map(i => {
+                    return `<img src=${i}>`;
+                }).join('');
+                this.paste(html, text);
             });
-        }));
+            ev.preventDefault();
+            return;
+        }
+        const div = this.doc.createElement('div');
+        div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
+        div.contentEditable = 'true';
+        this.doc.body.appendChild(div);
+        div.focus();
+        setTimeout(() => {
+            this.doc.body.removeChild(div);
+            div.style.cssText = '';
+            this.paste(div, text);
+        });
     }
-    handlePaste(dom, text) {
+    paste(dom, text) {
         const slot = this.parser.parse(dom, new core.Slot([
             core.ContentType.BlockComponent,
             core.ContentType.InlineComponent,
@@ -2124,61 +2135,67 @@ exports.NativeInput = class NativeInput extends Input {
     }
     handleDefaultActions(textarea) {
         this.subscription.add(stream.fromEvent(isFirefox() ? textarea : document, 'copy').subscribe(ev => {
-            const selection = this.selection;
-            if (!selection.isSelected) {
-                return;
-            }
-            if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
-                const content = selection.startSlot.getContentAtIndex(selection.startOffset);
-                if (typeof content === 'object') {
-                    const clipboardData = ev.clipboardData;
-                    const nativeSelection = document.getSelection();
-                    const range = nativeSelection.getRangeAt(0);
-                    const div = document.createElement('div');
-                    const fragment = range.cloneContents();
-                    div.append(fragment);
-                    clipboardData.setData('text/html', div.innerHTML);
-                    clipboardData.setData('text', div.innerText);
-                    ev.preventDefault();
-                }
-            }
+            this.copyHandler(ev);
         }), stream.fromEvent(textarea, 'paste').subscribe(ev => {
-            const text = ev.clipboardData.getData('Text');
-            const types = Array.from(ev.clipboardData.types || []);
-            const files = Array.from(ev.clipboardData.files);
-            if (types.every(type => type === 'Files') && files.length) {
-                Promise.all(files.filter(i => {
-                    return /image/i.test(i.type);
-                }).map(item => {
-                    const reader = new FileReader();
-                    return new Promise(resolve => {
-                        reader.onload = (event) => {
-                            resolve(event.target.result);
-                        };
-                        reader.readAsDataURL(item);
-                    });
-                })).then(urls => {
-                    const html = urls.map(i => {
-                        return `<img src=${i}>`;
-                    }).join('');
-                    this.handlePaste(html, text);
-                });
+            this.pasteHandler(ev);
+        }));
+    }
+    copyHandler(ev) {
+        const selection = this.selection;
+        if (!selection.isSelected) {
+            return;
+        }
+        if (selection.startSlot === selection.endSlot && selection.endOffset - selection.startOffset === 1) {
+            const content = selection.startSlot.getContentAtIndex(selection.startOffset);
+            if (typeof content === 'object') {
+                const clipboardData = ev.clipboardData;
+                const nativeSelection = document.getSelection();
+                const range = nativeSelection.getRangeAt(0);
+                const div = document.createElement('div');
+                const fragment = range.cloneContents();
+                div.append(fragment);
+                clipboardData.setData('text/html', div.innerHTML);
+                clipboardData.setData('text', div.innerText);
                 ev.preventDefault();
-                return;
             }
-            const div = document.createElement('div');
-            div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
-            div.contentEditable = 'true';
-            document.body.appendChild(div);
-            div.focus();
-            setTimeout(() => {
-                document.body.removeChild(div);
-                div.style.cssText = '';
-                this.handlePaste(div, text);
+        }
+    }
+    pasteHandler(ev) {
+        const text = ev.clipboardData.getData('Text');
+        const types = Array.from(ev.clipboardData.types || []);
+        const files = Array.from(ev.clipboardData.files);
+        if (types.every(type => type === 'Files') && files.length) {
+            Promise.all(files.filter(i => {
+                return /image/i.test(i.type);
+            }).map(item => {
+                const reader = new FileReader();
+                return new Promise(resolve => {
+                    reader.onload = (event) => {
+                        resolve(event.target.result);
+                    };
+                    reader.readAsDataURL(item);
+                });
+            })).then(urls => {
+                const html = urls.map(i => {
+                    return `<img src=${i}>`;
+                }).join('');
+                this.paste(html, text);
             });
-        }));
+            ev.preventDefault();
+            return;
+        }
+        const div = document.createElement('div');
+        div.style.cssText = 'width:1px; height:10px; overflow: hidden; position: fixed; left: 50%; top: 50%; opacity:0';
+        div.contentEditable = 'true';
+        document.body.appendChild(div);
+        div.focus();
+        setTimeout(() => {
+            document.body.removeChild(div);
+            div.style.cssText = '';
+            this.paste(div, text);
+        });
     }
-    handlePaste(dom, text) {
+    paste(dom, text) {
         const slot = this.parser.parse(dom, new core.Slot([
             core.ContentType.BlockComponent,
             core.ContentType.InlineComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "3.8.2",
+  "version": "3.8.4",
   "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.8",
     "@tanbo/stream": "^1.2.5",
-    "@textbus/core": "^3.8.1",
+    "@textbus/core": "^3.8.4",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "c44236787b0f1ab7798197cf710ed3c4baaf10d4"
+  "gitHead": "7359230a08229933be9cb78590b6777256fa5582"
 }