@textbus/platform-browser 4.0.0-alpha.0 → 4.0.0-alpha.10

package/README.md

@@ -4,120 +4,6 @@ Textbus PC 浏览器支持模块
 Textbus 是一套用于构建富交互的富文本编辑框架。和大多数富文本编辑器不同的是，Textbus 以组件为核心，格式为辅助，并大幅简化了富文本编辑器开发中常见
 API，且提供了更高的抽象层，使 Textbus 不仅易于上手，同时还能驱动复杂的富文本应用。
 
-本项目为 Textbus PC 端浏览器中间层实现，提供了 Textbus PC 端所需要的编辑器基本支持能力。如光标、选区桥接、DOM 解析及渲染能力桥接等。
-
-如果你需要一个开箱即用的编辑器，请参考[官方文档](https://textbus.io)。
-
-## 安装
-
-```
-npm install @textbus/core @textbus/platform-browser
-```
-
-## 创建编辑器
-
-```ts
-import { Viewer, ViewOptions } from '@textbus/browser'
-
-import { rootComponent, rootComponentLoader } from './root.component'
-
-const config: ViewOptions = {
-  // ...配置项
-}
-
-const editor = new Viewer(rootComponent, rootComponentLoader, config)
-```
-
-其中 `rootComponent`，`rootComponentLoader` 实现请参考[官方文档](https://textbus.io/docs/guide)。
-
-### 配置项
-
-配置项接口如下：
-
-```ts
-export interface ViewModule extends Module {
-  componentLoaders?: ComponentLoader[]
-  formatLoaders?: FormatLoader[]
-}
-
-/**
- * Textbus PC 端配置接口
- */
-export interface ViewOptions extends TextbusConfig {
-  imports?: ViewModule[]
-  /** 自动获取焦点 */
-  autoFocus?: boolean
-  /** 编辑区最小高度 */
-  minHeight?: string
-  /** 组件加载器 */
-  componentLoaders?: ComponentLoader[]
-  /** 格式加载器 */
-  formatLoaders?: FormatLoader[]
-  /** 默认内容 */
-  content?: string | ComponentLiteral
-  /** 文档默认样式表 */
-  styleSheets?: string[]
-  /** 配置文档编辑状态下用到的样式 */
-  editingStyleSheets?: string[]
-}
-```
-
-### 启动
-
-```ts
-const host = document.getElementById('editor')
-
-editor.mount(host).then(() => {
-  console.log('编辑器创建成功！')
-})
-```
-
-### 销毁编辑器
-
-```ts
-editor.destroy()
-```
-
-### 获取焦点
-
-```ts
-editor.focus()
-```
-
-### 取消焦点
-
-```ts
-editor.blur()
-```
-
-### 获取 HTML 内容
-
-```ts
-const content = editor.getContents().content
-```
-
-### 获取 JSON 内容
-
-```ts
-const json = editor.getJSON().content
-```
-
-### 替换内容
-
-```ts
-editor.replaceContent('<p>新内容！</p>')
-
-editor.replaceContent({
-  // 必须为 Textbus 导出的 JSON 格式
-})
-```
-
-### 清空编辑器
-
-```ts
-editor.replaceContent('')
-```
-
 ### 官方文档
 
 更多文档请参考：[中文文档](https://textbus.io)

package/bundles/collaborate-cursor.d.ts

@@ -1,5 +1,4 @@
-import { Injector } from '@viewfly/core';
-import { Selection, SelectionPaths, AbstractSelection, Scheduler } from '@textbus/core';
+import { Selection, SelectionPaths, AbstractSelection, Scheduler, Textbus } from '@textbus/core';
 import { SelectionBridge } from './selection-bridge';
 import { Rect } from './_utils/uikit';
 /**
@@ -44,7 +43,7 @@ export declare class CollaborateCursor {
     private subscription;
     private currentSelection;
     private container;
-    constructor(injector: Injector, nativeSelection: SelectionBridge, scheduler: Scheduler, selection: Selection, awarenessDelegate?: CollaborateSelectionAwarenessDelegate | undefined);
+    constructor(textbus: Textbus, nativeSelection: SelectionBridge, scheduler: Scheduler, selection: Selection, awarenessDelegate?: CollaborateSelectionAwarenessDelegate | undefined);
     /**
      * 刷新协作光标，由于 Textbus 只会绘制可视区域的光标，当可视区域发生变化时，需要重新绘制
      */

package/bundles/dom-adapter.d.ts

@@ -1,29 +1,58 @@
-import { ComponentInstance, Slot, ViewAdapter, NodeLocation, VElement } from '@textbus/core';
+import { ComponentInstance, Slot, ViewAdapter, NodeLocation, VElement, VTextNode } from '@textbus/core';
 /**
- * Textbus PC 端浏览器渲染能力实现
+ * Textbus PC 端浏览器渲染能力桥接器抽象类，提供了 DOM 元素查询能力，具体渲染能力由各前端框架实现相应桥接
  */
-export declare abstract class DomAdapter<ViewComponent, ViewElement> extends ViewAdapter<ViewElement> {
+export declare abstract class DomAdapter<ViewComponent, ViewElement> extends ViewAdapter {
     private mount;
     host: HTMLElement;
-    protected componentRootElementCaches: WeakMap<ComponentInstance<unknown, unknown, unknown>, HTMLElement>;
+    protected componentRootElementCaches: {
+        set: {
+            (key: ComponentInstance<unknown, unknown, unknown>, value: HTMLElement): void;
+            (key: HTMLElement, value: ComponentInstance<unknown, unknown, unknown>): void;
+        };
+        get: {
+            (key: ComponentInstance<unknown, unknown, unknown>): HTMLElement;
+            (key: HTMLElement): ComponentInstance<unknown, unknown, unknown>;
+        };
+        remove: (key: HTMLElement | ComponentInstance<unknown, unknown, unknown>) => void;
+    };
     protected slotRootNativeElementCaches: {
         set: {
-            (key: Slot<any>, value: Node): void;
-            (key: Node, value: Slot<any>): void;
+            (key: Slot<any>, value: HTMLElement): void;
+            (key: HTMLElement, value: Slot<any>): void;
         };
         get: {
-            (key: Slot<any>): Node;
-            (key: Node): Slot<any>;
+            (key: Slot<any>): HTMLElement;
+            (key: HTMLElement): Slot<any>;
         };
-        remove: (key: Node | Slot<any>) => void;
+        remove: (key: HTMLElement | Slot<any>) => void;
     };
     protected slotRootVElementCaches: WeakMap<Slot<any>, VElement>;
     protected constructor(mount: (host: HTMLElement, viewComponent: ViewComponent) => (void | (() => void)));
     render(rootComponent: ComponentInstance): void | (() => void);
     abstract componentRender(component: ComponentInstance): ViewComponent;
+    abstract slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | ComponentInstance>) => VElement, renderEnv: any): ViewElement;
     copy(): void;
+    /**
+     * 根据组件获取组件的根 DOM 节点
+     * @param component
+     */
     getNativeNodeByComponent(component: ComponentInstance): HTMLElement | null;
+    /**
+     * 根据 DOM 节点，获对对应的组件根节点，如传入的 DOM 节点不为组件的根节点，则返回 null
+     * @param node
+     */
+    getComponentByNativeNode(node: HTMLElement): ComponentInstance | null;
+    /**
+     * 根据插槽获取插槽的根 DOM 节点
+     * @param slot
+     */
     getNativeNodeBySlot(slot: Slot): HTMLElement | null;
+    /**
+     * 根据 DOM 节点，获对对应的插槽根节点，如传入的 DOM 节点不为插槽的根节点，则返回 null
+     * @param node
+     */
+    getSlotByNativeNode(node: HTMLElement): Slot | null;
     /**
      * 获取插槽内容节点集合
      * @param slot

package/bundles/index.esm.js

@@ -1,7 +1,7 @@
 import 'reflect-metadata';
-import { Slot, ViewAdapter, createBidirectionalMapping, VElement, VTextNode, ComponentInstance, Controller, Selection, RootComponentRef, ContentType, Event, invokeListener, Keyboard, Commander, Scheduler, NativeSelectionBridge } from '@textbus/core';
-import { InjectionToken, Injectable, Inject, Injector, Optional } from '@viewfly/core';
+import { Slot, Textbus, ViewAdapter, createBidirectionalMapping, ComponentInstance, VElement, VTextNode, Controller, Selection, RootComponentRef, ContentType, Event, invokeListener, Keyboard, Commander, Scheduler, NativeSelectionBridge, FocusManager } from '@textbus/core';
 import { Subject, filter, fromEvent, Subscription, distinctUntilChanged, merge, map, Observable } from '@tanbo/stream';
+import { InjectionToken, Injectable, Inject, Optional } from '@viewfly/core';
 
 function createElement(tagName, options = {}) {
     const el = document.createElement(tagName);
@@ -166,9 +166,9 @@ let Parser = Parser_1 = class Parser {
     static parseHTML(html) {
         return new DOMParser().parseFromString(html, 'text/html').body;
     }
-    constructor(options, injector) {
+    constructor(options, textbus) {
         this.options = options;
-        this.injector = injector;
+        this.textbus = textbus;
         const componentLoaders = [
             ...(options.componentLoaders || [])
         ];
@@ -187,23 +187,23 @@ let Parser = Parser_1 = class Parser {
         this.attributeLoaders = attributeLoaders;
     }
     /**
-     * 使用指定的组件加载器解析一段 HTML 字符串
+     * 使用指定的组件加载器解析一段 HTML 字符串或 DOM 元素
      * @param html
      * @param rootComponentLoader
      */
     parseDoc(html, rootComponentLoader) {
-        const element = Parser_1.parseHTML(html);
-        return rootComponentLoader.read(element, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
+        const element = typeof html === 'string' ? Parser_1.parseHTML(html) : html;
+        return rootComponentLoader.read(element, this.textbus, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
             return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
         });
     }
     /**
-     * 将一段 HTML 解析到指定插槽
+     * 将一段 HTML 或 DOM 元素解析到指定插槽
      * @param html
      * @param rootSlot
      */
     parse(html, rootSlot) {
-        const element = Parser_1.parseHTML(html);
+        const element = typeof html === 'string' ? Parser_1.parseHTML(html) : html;
         return this.readFormats(element, rootSlot);
     }
     readComponent(el, slot) {
@@ -214,7 +214,7 @@ let Parser = Parser_1 = class Parser {
             }
             for (const t of this.componentLoaders) {
                 if (t.match(el)) {
-                    const result = t.read(el, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
+                    const result = t.read(el, this.textbus, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
                         return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
                     });
                     if (!result) {
@@ -294,14 +294,14 @@ let Parser = Parser_1 = class Parser {
 Parser = Parser_1 = __decorate([
     Injectable(),
     __param(0, Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, Injector])
+    __metadata("design:paramtypes", [Object, Textbus])
 ], Parser);
 
 class Input {
 }
 
 /**
- * Textbus PC 端浏览器渲染能力实现
+ * Textbus PC 端浏览器渲染能力桥接器抽象类，提供了 DOM 元素查询能力，具体渲染能力由各前端框架实现相应桥接
  */
 class DomAdapter extends ViewAdapter {
     constructor(mount) {
@@ -322,7 +322,9 @@ class DomAdapter extends ViewAdapter {
                 id: 'textbus-' + Number((Math.random() + '').substring(2)).toString(16)
             }
         });
-        this.componentRootElementCaches = new WeakMap();
+        this.componentRootElementCaches = createBidirectionalMapping(a => {
+            return a instanceof ComponentInstance;
+        });
         this.slotRootNativeElementCaches = createBidirectionalMapping(a => {
             return a instanceof Slot;
         });
@@ -335,12 +337,34 @@ class DomAdapter extends ViewAdapter {
     copy() {
         document.execCommand('copy');
     }
+    /**
+     * 根据组件获取组件的根 DOM 节点
+     * @param component
+     */
     getNativeNodeByComponent(component) {
         return this.componentRootElementCaches.get(component) || null;
     }
+    /**
+     * 根据 DOM 节点，获对对应的组件根节点，如传入的 DOM 节点不为组件的根节点，则返回 null
+     * @param node
+     */
+    getComponentByNativeNode(node) {
+        return this.componentRootElementCaches.get(node) || null;
+    }
+    /**
+     * 根据插槽获取插槽的根 DOM 节点
+     * @param slot
+     */
     getNativeNodeBySlot(slot) {
         return this.slotRootNativeElementCaches.get(slot) || null;
     }
+    /**
+     * 根据 DOM 节点，获对对应的插槽根节点，如传入的 DOM 节点不为插槽的根节点，则返回 null
+     * @param node
+     */
+    getSlotByNativeNode(node) {
+        return this.slotRootNativeElementCaches.get(node) || null;
+    }
     /**
      * 获取插槽内容节点集合
      * @param slot
@@ -425,7 +449,7 @@ class DomAdapter extends ViewAdapter {
  * Textbus PC 端选区桥接实现
  */
 let SelectionBridge = class SelectionBridge {
-    constructor(config, injector, controller, selection, rootComponentRef, input, domAdapter) {
+    constructor(config, textbus, controller, selection, rootComponentRef, input, domAdapter) {
         this.config = config;
         this.selection = selection;
         this.rootComponentRef = rootComponentRef;
@@ -437,7 +461,7 @@ let SelectionBridge = class SelectionBridge {
         this.connector = null;
         this.ignoreSelectionChange = false;
         this.changeFromUser = false;
-        this.docContainer = injector.get(VIEW_DOCUMENT);
+        this.docContainer = textbus.get(VIEW_DOCUMENT);
         this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(filter(() => {
             return !controller.readonly;
         }));
@@ -966,7 +990,7 @@ let SelectionBridge = class SelectionBridge {
 SelectionBridge = __decorate([
     Injectable(),
     __param(0, Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, Injector,
+    __metadata("design:paramtypes", [Object, Textbus,
         Controller,
         Selection,
         RootComponentRef,
@@ -1222,7 +1246,7 @@ let MagicInput = class MagicInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(parser, keyboard, commander, selection, controller, scheduler, injector) {
+    constructor(parser, keyboard, commander, selection, controller, scheduler, textbus) {
         super();
         this.parser = parser;
         this.keyboard = keyboard;
@@ -1230,10 +1254,10 @@ let MagicInput = class MagicInput extends Input {
         this.selection = selection;
         this.controller = controller;
         this.scheduler = scheduler;
-        this.injector = injector;
+        this.textbus = textbus;
         this.composition = false;
         this.compositionState = null;
-        this.caret = new ExperimentalCaret(this.scheduler, this.injector.get(VIEW_MASK));
+        this.caret = new ExperimentalCaret(this.scheduler, this.textbus.get(VIEW_MASK));
         this.isSafari = isSafari();
         this.isFirefox = isFirefox();
         this.isMac = isMac();
@@ -1364,17 +1388,14 @@ let MagicInput = class MagicInput extends Input {
             this.doc.body.appendChild(div);
             div.focus();
             setTimeout(() => {
-                let html = div.innerHTML;
-                if (!html && text && this.isFirefox) {
-                    html = text;
-                }
-                this.handlePaste(html, text);
                 this.doc.body.removeChild(div);
+                div.style.cssText = '';
+                this.handlePaste(div, text);
             });
         }));
     }
-    handlePaste(html, text) {
-        const slot = this.parser.parse(html, new Slot([
+    handlePaste(dom, text) {
+        const slot = this.parser.parse(dom, new Slot([
             ContentType.BlockComponent,
             ContentType.InlineComponent,
             ContentType.Text
@@ -1534,7 +1555,7 @@ MagicInput = __decorate([
         Selection,
         Controller,
         Scheduler,
-        Injector])
+        Textbus])
 ], MagicInput);
 
 /**
@@ -1546,7 +1567,7 @@ class CollaborateSelectionAwarenessDelegate {
  * 协作光标绘制类
  */
 let CollaborateCursor = class CollaborateCursor {
-    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
+    constructor(textbus, nativeSelection, scheduler, selection, awarenessDelegate) {
         this.nativeSelection = nativeSelection;
         this.scheduler = scheduler;
         this.selection = selection;
@@ -1599,7 +1620,7 @@ let CollaborateCursor = class CollaborateCursor {
         this.onRectsChange = new Subject();
         this.subscription = new Subscription();
         this.currentSelection = [];
-        this.container = injector.get(VIEW_CONTAINER);
+        this.container = textbus.get(VIEW_CONTAINER);
         this.canvasContainer.append(this.canvas);
         this.host.append(this.canvasContainer, this.tooltips);
         this.container.prepend(this.host);
@@ -1791,7 +1812,7 @@ let CollaborateCursor = class CollaborateCursor {
 CollaborateCursor = __decorate([
     Injectable(),
     __param(4, Optional()),
-    __metadata("design:paramtypes", [Injector,
+    __metadata("design:paramtypes", [Textbus,
         SelectionBridge,
         Scheduler,
         Selection,
@@ -1912,7 +1933,7 @@ let NativeInput = class NativeInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(injector, parser, scheduler, selection, keyboard, domAdapter, commander, controller) {
+    constructor(textbus, parser, scheduler, selection, keyboard, domAdapter, commander, controller) {
         super();
         this.parser = parser;
         this.scheduler = scheduler;
@@ -1933,7 +1954,7 @@ let NativeInput = class NativeInput extends Input {
         this.isMac = isMac();
         this.isMobileBrowser = isMobileBrowser();
         this.ignoreComposition = false; // 有 bug 版本搜狗拼音
-        this.documentView = injector.get(VIEW_DOCUMENT);
+        this.documentView = textbus.get(VIEW_DOCUMENT);
         if (!controller.readonly) {
             this.documentView.contentEditable = 'true';
         }
@@ -2014,9 +2035,9 @@ let NativeInput = class NativeInput extends Input {
             document.body.appendChild(div);
             div.focus();
             setTimeout(() => {
-                const html = div.innerHTML;
-                this.handlePaste(html, text);
                 document.body.removeChild(div);
+                div.style.cssText = '';
+                this.handlePaste(div, text);
             });
         }));
     }
@@ -2264,7 +2285,7 @@ let NativeInput = class NativeInput extends Input {
 };
 NativeInput = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [Injector,
+    __metadata("design:paramtypes", [Textbus,
         Parser,
         Scheduler,
         Selection,
@@ -2310,11 +2331,29 @@ class BrowserModule {
             }, {
                 provide: DomAdapter,
                 useValue: config.adapter
+            }, {
+                provide: FocusManager,
+                useFactory: (input) => {
+                    const focusEvent = new Subject();
+                    const blurEvent = new Subject();
+                    input.caret.onPositionChange.pipe(map(p => !!p), distinctUntilChanged()).subscribe(b => {
+                        if (b) {
+                            focusEvent.next();
+                        }
+                        else {
+                            blurEvent.next();
+                        }
+                    });
+                    return {
+                        onFocus: focusEvent,
+                        onBlur: blurEvent
+                    };
+                },
+                deps: [Input]
             },
             Parser,
             SelectionBridge,
-            CollaborateCursor
-        ];
+            CollaborateCursor];
         this.workbench = wrapper;
         this.host.append(wrapper);
     }

package/bundles/index.js

@@ -2,8 +2,8 @@
 
 require('reflect-metadata');
 var core$1 = require('@textbus/core');
-var core = require('@viewfly/core');
 var stream = require('@tanbo/stream');
+var core = require('@viewfly/core');
 
 function createElement(tagName, options = {}) {
     const el = document.createElement(tagName);
@@ -168,9 +168,9 @@ exports.Parser = Parser_1 = class Parser {
     static parseHTML(html) {
         return new DOMParser().parseFromString(html, 'text/html').body;
     }
-    constructor(options, injector) {
+    constructor(options, textbus) {
         this.options = options;
-        this.injector = injector;
+        this.textbus = textbus;
         const componentLoaders = [
             ...(options.componentLoaders || [])
         ];
@@ -189,23 +189,23 @@ exports.Parser = Parser_1 = class Parser {
         this.attributeLoaders = attributeLoaders;
     }
     /**
-     * 使用指定的组件加载器解析一段 HTML 字符串
+     * 使用指定的组件加载器解析一段 HTML 字符串或 DOM 元素
      * @param html
      * @param rootComponentLoader
      */
     parseDoc(html, rootComponentLoader) {
-        const element = Parser_1.parseHTML(html);
-        return rootComponentLoader.read(element, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
+        const element = typeof html === 'string' ? Parser_1.parseHTML(html) : html;
+        return rootComponentLoader.read(element, this.textbus, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
             return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
         });
     }
     /**
-     * 将一段 HTML 解析到指定插槽
+     * 将一段 HTML 或 DOM 元素解析到指定插槽
      * @param html
      * @param rootSlot
      */
     parse(html, rootSlot) {
-        const element = Parser_1.parseHTML(html);
+        const element = typeof html === 'string' ? Parser_1.parseHTML(html) : html;
         return this.readFormats(element, rootSlot);
     }
     readComponent(el, slot) {
@@ -216,7 +216,7 @@ exports.Parser = Parser_1 = class Parser {
             }
             for (const t of this.componentLoaders) {
                 if (t.match(el)) {
-                    const result = t.read(el, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
+                    const result = t.read(el, this.textbus, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
                         return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
                     });
                     if (!result) {
@@ -296,14 +296,14 @@ exports.Parser = Parser_1 = class Parser {
 exports.Parser = Parser_1 = __decorate([
     core.Injectable(),
     __param(0, core.Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, core.Injector])
+    __metadata("design:paramtypes", [Object, core$1.Textbus])
 ], exports.Parser);
 
 class Input {
 }
 
 /**
- * Textbus PC 端浏览器渲染能力实现
+ * Textbus PC 端浏览器渲染能力桥接器抽象类，提供了 DOM 元素查询能力，具体渲染能力由各前端框架实现相应桥接
  */
 class DomAdapter extends core$1.ViewAdapter {
     constructor(mount) {
@@ -324,7 +324,9 @@ class DomAdapter extends core$1.ViewAdapter {
                 id: 'textbus-' + Number((Math.random() + '').substring(2)).toString(16)
             }
         });
-        this.componentRootElementCaches = new WeakMap();
+        this.componentRootElementCaches = core$1.createBidirectionalMapping(a => {
+            return a instanceof core$1.ComponentInstance;
+        });
         this.slotRootNativeElementCaches = core$1.createBidirectionalMapping(a => {
             return a instanceof core$1.Slot;
         });
@@ -337,12 +339,34 @@ class DomAdapter extends core$1.ViewAdapter {
     copy() {
         document.execCommand('copy');
     }
+    /**
+     * 根据组件获取组件的根 DOM 节点
+     * @param component
+     */
     getNativeNodeByComponent(component) {
         return this.componentRootElementCaches.get(component) || null;
     }
+    /**
+     * 根据 DOM 节点，获对对应的组件根节点，如传入的 DOM 节点不为组件的根节点，则返回 null
+     * @param node
+     */
+    getComponentByNativeNode(node) {
+        return this.componentRootElementCaches.get(node) || null;
+    }
+    /**
+     * 根据插槽获取插槽的根 DOM 节点
+     * @param slot
+     */
     getNativeNodeBySlot(slot) {
         return this.slotRootNativeElementCaches.get(slot) || null;
     }
+    /**
+     * 根据 DOM 节点，获对对应的插槽根节点，如传入的 DOM 节点不为插槽的根节点，则返回 null
+     * @param node
+     */
+    getSlotByNativeNode(node) {
+        return this.slotRootNativeElementCaches.get(node) || null;
+    }
     /**
      * 获取插槽内容节点集合
      * @param slot
@@ -427,7 +451,7 @@ class DomAdapter extends core$1.ViewAdapter {
  * Textbus PC 端选区桥接实现
  */
 exports.SelectionBridge = class SelectionBridge {
-    constructor(config, injector, controller, selection, rootComponentRef, input, domAdapter) {
+    constructor(config, textbus, controller, selection, rootComponentRef, input, domAdapter) {
         this.config = config;
         this.selection = selection;
         this.rootComponentRef = rootComponentRef;
@@ -439,7 +463,7 @@ exports.SelectionBridge = class SelectionBridge {
         this.connector = null;
         this.ignoreSelectionChange = false;
         this.changeFromUser = false;
-        this.docContainer = injector.get(VIEW_DOCUMENT);
+        this.docContainer = textbus.get(VIEW_DOCUMENT);
         this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(stream.filter(() => {
             return !controller.readonly;
         }));
@@ -968,7 +992,7 @@ exports.SelectionBridge = class SelectionBridge {
 exports.SelectionBridge = __decorate([
     core.Injectable(),
     __param(0, core.Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, core.Injector,
+    __metadata("design:paramtypes", [Object, core$1.Textbus,
         core$1.Controller,
         core$1.Selection,
         core$1.RootComponentRef,
@@ -1224,7 +1248,7 @@ exports.MagicInput = class MagicInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(parser, keyboard, commander, selection, controller, scheduler, injector) {
+    constructor(parser, keyboard, commander, selection, controller, scheduler, textbus) {
         super();
         this.parser = parser;
         this.keyboard = keyboard;
@@ -1232,10 +1256,10 @@ exports.MagicInput = class MagicInput extends Input {
         this.selection = selection;
         this.controller = controller;
         this.scheduler = scheduler;
-        this.injector = injector;
+        this.textbus = textbus;
         this.composition = false;
         this.compositionState = null;
-        this.caret = new ExperimentalCaret(this.scheduler, this.injector.get(VIEW_MASK));
+        this.caret = new ExperimentalCaret(this.scheduler, this.textbus.get(VIEW_MASK));
         this.isSafari = isSafari();
         this.isFirefox = isFirefox();
         this.isMac = isMac();
@@ -1366,17 +1390,14 @@ exports.MagicInput = class MagicInput extends Input {
             this.doc.body.appendChild(div);
             div.focus();
             setTimeout(() => {
-                let html = div.innerHTML;
-                if (!html && text && this.isFirefox) {
-                    html = text;
-                }
-                this.handlePaste(html, text);
                 this.doc.body.removeChild(div);
+                div.style.cssText = '';
+                this.handlePaste(div, text);
             });
         }));
     }
-    handlePaste(html, text) {
-        const slot = this.parser.parse(html, new core$1.Slot([
+    handlePaste(dom, text) {
+        const slot = this.parser.parse(dom, new core$1.Slot([
             core$1.ContentType.BlockComponent,
             core$1.ContentType.InlineComponent,
             core$1.ContentType.Text
@@ -1536,7 +1557,7 @@ exports.MagicInput = __decorate([
         core$1.Selection,
         core$1.Controller,
         core$1.Scheduler,
-        core.Injector])
+        core$1.Textbus])
 ], exports.MagicInput);
 
 /**
@@ -1548,7 +1569,7 @@ class CollaborateSelectionAwarenessDelegate {
  * 协作光标绘制类
  */
 exports.CollaborateCursor = class CollaborateCursor {
-    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
+    constructor(textbus, nativeSelection, scheduler, selection, awarenessDelegate) {
         this.nativeSelection = nativeSelection;
         this.scheduler = scheduler;
         this.selection = selection;
@@ -1601,7 +1622,7 @@ exports.CollaborateCursor = class CollaborateCursor {
         this.onRectsChange = new stream.Subject();
         this.subscription = new stream.Subscription();
         this.currentSelection = [];
-        this.container = injector.get(VIEW_CONTAINER);
+        this.container = textbus.get(VIEW_CONTAINER);
         this.canvasContainer.append(this.canvas);
         this.host.append(this.canvasContainer, this.tooltips);
         this.container.prepend(this.host);
@@ -1793,7 +1814,7 @@ exports.CollaborateCursor = class CollaborateCursor {
 exports.CollaborateCursor = __decorate([
     core.Injectable(),
     __param(4, core.Optional()),
-    __metadata("design:paramtypes", [core.Injector,
+    __metadata("design:paramtypes", [core$1.Textbus,
         exports.SelectionBridge,
         core$1.Scheduler,
         core$1.Selection,
@@ -1914,7 +1935,7 @@ let NativeInput = class NativeInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(injector, parser, scheduler, selection, keyboard, domAdapter, commander, controller) {
+    constructor(textbus, parser, scheduler, selection, keyboard, domAdapter, commander, controller) {
         super();
         this.parser = parser;
         this.scheduler = scheduler;
@@ -1935,7 +1956,7 @@ let NativeInput = class NativeInput extends Input {
         this.isMac = isMac();
         this.isMobileBrowser = isMobileBrowser();
         this.ignoreComposition = false; // 有 bug 版本搜狗拼音
-        this.documentView = injector.get(VIEW_DOCUMENT);
+        this.documentView = textbus.get(VIEW_DOCUMENT);
         if (!controller.readonly) {
             this.documentView.contentEditable = 'true';
         }
@@ -2016,9 +2037,9 @@ let NativeInput = class NativeInput extends Input {
             document.body.appendChild(div);
             div.focus();
             setTimeout(() => {
-                const html = div.innerHTML;
-                this.handlePaste(html, text);
                 document.body.removeChild(div);
+                div.style.cssText = '';
+                this.handlePaste(div, text);
             });
         }));
     }
@@ -2266,7 +2287,7 @@ let NativeInput = class NativeInput extends Input {
 };
 NativeInput = __decorate([
     core.Injectable(),
-    __metadata("design:paramtypes", [core.Injector,
+    __metadata("design:paramtypes", [core$1.Textbus,
         exports.Parser,
         core$1.Scheduler,
         core$1.Selection,
@@ -2312,11 +2333,29 @@ class BrowserModule {
             }, {
                 provide: DomAdapter,
                 useValue: config.adapter
+            }, {
+                provide: core$1.FocusManager,
+                useFactory: (input) => {
+                    const focusEvent = new stream.Subject();
+                    const blurEvent = new stream.Subject();
+                    input.caret.onPositionChange.pipe(stream.map(p => !!p), stream.distinctUntilChanged()).subscribe(b => {
+                        if (b) {
+                            focusEvent.next();
+                        }
+                        else {
+                            blurEvent.next();
+                        }
+                    });
+                    return {
+                        onFocus: focusEvent,
+                        onBlur: blurEvent
+                    };
+                },
+                deps: [Input]
             },
             exports.Parser,
             exports.SelectionBridge,
-            exports.CollaborateCursor
-        ];
+            exports.CollaborateCursor];
         this.workbench = wrapper;
         this.host.append(wrapper);
     }

package/bundles/magic-input.d.ts

@@ -1,6 +1,5 @@
 import { Observable } from '@tanbo/stream';
-import { Injector } from '@viewfly/core';
-import { Commander, Controller, Keyboard, Scheduler, Selection } from '@textbus/core';
+import { Commander, Controller, Keyboard, Scheduler, Selection, Textbus } from '@textbus/core';
 import { Parser } from './parser';
 import { Caret, CaretPosition, CompositionState, Input, Scroller } from './types';
 interface CaretStyle {
@@ -48,7 +47,7 @@ export declare class MagicInput extends Input {
     private selection;
     private controller;
     private scheduler;
-    private injector;
+    private textbus;
     composition: boolean;
     compositionState: CompositionState | null;
     onReady: Promise<void>;
@@ -67,7 +66,7 @@ export declare class MagicInput extends Input {
     private isFocus;
     private nativeFocus;
     private ignoreComposition;
-    constructor(parser: Parser, keyboard: Keyboard, commander: Commander, selection: Selection, controller: Controller, scheduler: Scheduler, injector: Injector);
+    constructor(parser: Parser, keyboard: Keyboard, commander: Commander, selection: Selection, controller: Controller, scheduler: Scheduler, textbus: Textbus);
     focus(range: Range, restart: boolean): void;
     blur(): void;
     destroy(): void;

package/bundles/native-input.d.ts

@@ -1,6 +1,5 @@
-import { Injector } from '@viewfly/core';
 import { Observable } from '@tanbo/stream';
-import { Commander, Controller, Keyboard, Scheduler, Selection } from '@textbus/core';
+import { Commander, Controller, Keyboard, Scheduler, Selection, Textbus } from '@textbus/core';
 import { Caret, CaretPosition, CompositionState, Input, Scroller } from './types';
 import { Parser } from './parser';
 import { DomAdapter } from './dom-adapter';
@@ -42,7 +41,7 @@ export declare class NativeInput extends Input {
     private isMac;
     private isMobileBrowser;
     private ignoreComposition;
-    constructor(injector: Injector, parser: Parser, scheduler: Scheduler, selection: Selection, keyboard: Keyboard, domAdapter: DomAdapter<any, any>, commander: Commander, controller: Controller);
+    constructor(textbus: Textbus, parser: Parser, scheduler: Scheduler, selection: Selection, keyboard: Keyboard, domAdapter: DomAdapter<any, any>, commander: Commander, controller: Controller);
     focus(nativeRange: Range): void;
     blur(): void;
     destroy(): void;

package/bundles/parser.d.ts

@@ -1,5 +1,4 @@
-import { Injector } from '@viewfly/core';
-import { Attribute, ComponentInstance, Formatter, FormatValue, Slot } from '@textbus/core';
+import { Attribute, ComponentInstance, Formatter, FormatValue, Slot, Textbus } from '@textbus/core';
 import { ViewOptions } from './browser-module';
 /**
  * 插槽解析器
@@ -21,16 +20,16 @@ export interface ComponentLoader {
     /** 识别组件的匹配方法 */
     match(element: HTMLElement): boolean;
     /** 读取组件内容的方法 */
-    read(element: HTMLElement, injector: Injector, slotParser: SlotParser): ComponentInstance | Slot | void;
+    read(element: HTMLElement, textbus: Textbus, slotParser: SlotParser): ComponentInstance | Slot | void;
 }
-export interface FormatLoaderReadResult<T extends FormatValue> {
+export interface FormatLoaderReadResult<T = FormatValue> {
     formatter: Formatter<T>;
     value: T;
 }
 /**
  * 格式加载器
  */
-export interface FormatLoader<T extends FormatValue> {
+export interface FormatLoader<T = FormatValue> {
     /**
      * 匹配一个 DOM 节点是否是某个格式节点
      * @param element
@@ -42,14 +41,14 @@ export interface FormatLoader<T extends FormatValue> {
      */
     read(element: HTMLElement): FormatLoaderReadResult<T>;
 }
-export interface AttributeLoaderReadResult<T extends FormatValue> {
+export interface AttributeLoaderReadResult<T = FormatValue> {
     attribute: Attribute<T>;
     value: T;
 }
 /**
  * 属性加载器
  */
-export interface AttributeLoader<T extends FormatValue> {
+export interface AttributeLoader<T = FormatValue> {
     /**
      * 匹配一个 DOM 节点是否是某个属性节点
      * @param element
@@ -66,24 +65,24 @@ export interface AttributeLoader<T extends FormatValue> {
  */
 export declare class Parser {
     private options;
-    private injector;
+    private textbus;
     static parseHTML(html: string): HTMLElement;
     componentLoaders: ComponentLoader[];
     formatLoaders: FormatLoader<any>[];
     attributeLoaders: AttributeLoader<any>[];
-    constructor(options: ViewOptions, injector: Injector);
+    constructor(options: ViewOptions, textbus: Textbus);
     /**
-     * 使用指定的组件加载器解析一段 HTML 字符串
+     * 使用指定的组件加载器解析一段 HTML 字符串或 DOM 元素
      * @param html
      * @param rootComponentLoader
      */
-    parseDoc(html: string, rootComponentLoader: ComponentLoader): void | Slot<any> | ComponentInstance<unknown, unknown, unknown>;
+    parseDoc(html: string | HTMLElement, rootComponentLoader: ComponentLoader): void | Slot<any> | ComponentInstance<unknown, unknown, unknown>;
     /**
-     * 将一段 HTML 解析到指定插槽
+     * 将一段 HTML 或 DOM 元素解析到指定插槽
      * @param html
      * @param rootSlot
      */
-    parse(html: string, rootSlot: Slot): Slot<any>;
+    parse(html: string | HTMLElement, rootSlot: Slot): Slot<any>;
     private readComponent;
     private readText;
     private readFormats;

package/bundles/selection-bridge.d.ts

@@ -1,6 +1,5 @@
 import { Observable } from '@tanbo/stream';
-import { Injector } from '@viewfly/core';
-import { NativeSelectionBridge, NativeSelectionConnector, SelectionPosition, AbstractSelection, RootComponentRef, Controller, Selection } from '@textbus/core';
+import { NativeSelectionBridge, NativeSelectionConnector, SelectionPosition, AbstractSelection, RootComponentRef, Controller, Selection, Textbus } from '@textbus/core';
 import { Rect } from './_utils/uikit';
 import { Input } from './types';
 import { DomAdapter } from './dom-adapter';
@@ -25,7 +24,7 @@ export declare class SelectionBridge implements NativeSelectionBridge {
     private docContainer;
     private cacheCaretPositionTimer;
     private oldCaretPosition;
-    constructor(config: ViewOptions, injector: Injector, controller: Controller, selection: Selection, rootComponentRef: RootComponentRef, input: Input, domAdapter: DomAdapter<any, any>);
+    constructor(config: ViewOptions, textbus: Textbus, controller: Controller, selection: Selection, rootComponentRef: RootComponentRef, input: Input, domAdapter: DomAdapter<any, any>);
     connect(connector: NativeSelectionConnector): void;
     disConnect(): void;
     getRect(location: SelectionPosition): Rect | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.10",
   "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",
@@ -26,8 +26,8 @@
   ],
   "dependencies": {
     "@tanbo/stream": "^1.2.0",
-    "@textbus/core": "^4.0.0-alpha.0",
-    "@viewfly/core": "^0.1.0",
+    "@textbus/core": "^4.0.0-alpha.10",
+    "@viewfly/core": "^0.3.0",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "cf4fd289b73bc777124a32fe42bb58eba05a34f1"
+  "gitHead": "f3e2e1a0075d4355c954939dae1d267f8571fb7f"
 }