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

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,5 +1,5 @@
 import 'reflect-metadata';
-import { Slot, ViewAdapter, createBidirectionalMapping, VElement, VTextNode, ComponentInstance, Controller, Selection, RootComponentRef, ContentType, Event, invokeListener, Keyboard, Commander, Scheduler, NativeSelectionBridge } from '@textbus/core';
+import { Slot, ViewAdapter, createBidirectionalMapping, ComponentInstance, VElement, VTextNode, Controller, Selection, RootComponentRef, ContentType, Event, invokeListener, Keyboard, Commander, Scheduler, NativeSelectionBridge } from '@textbus/core';
 import { InjectionToken, Injectable, Inject, Injector, Optional } from '@viewfly/core';
 import { Subject, filter, fromEvent, Subscription, distinctUntilChanged, merge, map, Observable } from '@tanbo/stream';
 
@@ -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);
+        const element = typeof html === 'string' ? Parser_1.parseHTML(html) : html;
         return rootComponentLoader.read(element, this.injector, (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) {
@@ -301,7 +301,7 @@ 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
@@ -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
@@ -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);
             });
         }));
     }

package/bundles/index.js

@@ -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);
+        const element = typeof html === 'string' ? Parser_1.parseHTML(html) : html;
         return rootComponentLoader.read(element, this.injector, (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) {
@@ -303,7 +303,7 @@ 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
@@ -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
@@ -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);
             });
         }));
     }

package/bundles/parser.d.ts

@@ -73,17 +73,17 @@ export declare class Parser {
     attributeLoaders: AttributeLoader<any>[];
     constructor(options: ViewOptions, injector: Injector);
     /**
-     * 使用指定的组件加载器解析一段 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.5",
   "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.5",
+    "@viewfly/core": "^0.2.4",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "cf4fd289b73bc777124a32fe42bb58eba05a34f1"
+  "gitHead": "072831527fe07e7c21a14f3141d55b24d321a690"
 }