@textbus/adapter-react 4.0.0-alpha.41 → 4.0.0-alpha.42

package/bundles/index.esm.js

@@ -1,30 +1,81 @@
-import { useState, useEffect, createElement } from 'react';
-import { Subject } from '@tanbo/stream';
-import { makeError, VElement, VTextNode, replaceEmpty, invokeListener } from '@textbus/core';
+import { makeError, VElement, VTextNode } from '@textbus/core';
 import { DomAdapter } from '@textbus/platform-browser';
+import { createElement, useState, useEffect } from 'react';
 
-// hack start
-// 在 composition 输入时，浏览器会默认删除占位节点（<br>），这会导致 react 在 diff 时报错
-const oldRemoveChild = Node.prototype.removeChild;
-Node.prototype.removeChild = function (child) {
-    if (child) {
-        if (!child.parentNode) {
-            return child;
-        }
-    }
-    return oldRemoveChild.call(this, child);
-};
-// hack end
 const adapterError = makeError('ReactAdapter');
-/**
- * Textbus 桥接 React 渲染能力适配器，用于在 React 项目中渲染 Textbus 数据
- */
-class Adapter extends DomAdapter {
+class ReactAdapter extends DomAdapter {
     constructor(components, mount) {
-        super(mount);
-        this.onViewUpdated = new Subject();
+        super({
+            createCompositionNode(compositionState, updateNativeCompositionNode) {
+                return new VElement('span', {
+                    style: {
+                        textDecoration: 'underline'
+                    },
+                    ref: (node) => {
+                        updateNativeCompositionNode(node);
+                    }
+                }, [
+                    new VTextNode(compositionState.text)
+                ]);
+            },
+            getParentNode(node) {
+                return node.parentNode;
+            },
+            getChildNodes(parentElement) {
+                return Array.from(parentElement.childNodes);
+            },
+            isNativeElementNode(node) {
+                return node instanceof HTMLElement;
+            },
+            getChildByIndex(parentElement, index) {
+                return parentElement.childNodes[index];
+            },
+            getAndUpdateSlotRootNativeElement(vEle, update) {
+                const currentRef = vEle.attrs.get('ref');
+                if (currentRef) {
+                    vEle.attrs.set('ref', (v) => {
+                        update(v);
+                        if (typeof currentRef === 'function') {
+                            currentRef(v);
+                        }
+                        else if (!currentRef.current) {
+                            currentRef.current = v;
+                        }
+                    });
+                }
+                else {
+                    vEle.attrs.set('ref', update);
+                }
+            },
+            componentRender: (component) => {
+                const comp = this.components[component.name] || this.components['*'];
+                if (comp) {
+                    component.changeMarker.rendered();
+                    return createElement(comp, {
+                        key: component.id,
+                        component
+                    });
+                }
+                throw adapterError(`cannot found view component \`${component.name}\`!`);
+            },
+            vElementToViewElement(vNode, children) {
+                const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
+                    a[b[0]] = b[1];
+                    return a;
+                }, {})));
+                if (vNode.classes.size) {
+                    props.className = Array.from(vNode.classes).join(' ');
+                }
+                if (vNode.styles) {
+                    props.style = Array.from(vNode.styles).reduce((a, b) => {
+                        a[b[0]] = b[1];
+                        return a;
+                    }, {});
+                }
+                return createElement(vNode.tagName, props, ...children);
+            }
+        }, mount);
         this.components = {};
-        this.componentRendingStack = [];
         Object.keys(components).forEach(key => {
             this.components[key] = (props) => {
                 const component = props.component;
@@ -70,101 +121,9 @@ class Adapter extends DomAdapter {
             };
         });
     }
-    componentRender(component) {
-        const comp = this.components[component.name] || this.components['*'];
-        if (comp) {
-            component.changeMarker.rendered();
-            return createElement(comp, {
-                key: component.id,
-                component
-            });
-        }
-        throw adapterError(`cannot found view component \`${component.name}\`!`);
-    }
-    slotRender(slot, slotHostRender, renderEnv) {
-        var _a;
-        const context = this.componentRendingStack[this.componentRendingStack.length - 1];
-        if (context) {
-            context.__slots__.push(slot);
-        }
-        else if (!this.renderedSlotCache.has(slot)) {
-            throw adapterError(`Unrendered slots must be rendered together with the corresponding "${((_a = slot.parent) === null || _a === void 0 ? void 0 : _a.name) || 'unknown'}" component`);
-        }
-        this.renderedSlotCache.set(slot, true);
-        const vElement = slot.toTree(slotHostRender, renderEnv);
-        this.slotRootVElementCaches.set(slot, vElement);
-        const vNodeToJSX = (vNode) => {
-            const children = [];
-            if (this.composition && this.composition.slot === slot) {
-                this.insertCompositionByIndex(slot, vNode, this.composition, () => {
-                    return new VElement('span', {
-                        style: {
-                            textDecoration: 'underline'
-                        },
-                        ref: (node) => {
-                            this.compositionNode = node;
-                        }
-                    }, [
-                        new VTextNode(this.composition.text)
-                    ]);
-                });
-            }
-            for (let i = 0; i < vNode.children.length; i++) {
-                const child = vNode.children[i];
-                if (child instanceof VElement) {
-                    children.push(vNodeToJSX(child));
-                }
-                else if (child instanceof VTextNode) {
-                    children.push(replaceEmpty(child.textContent));
-                }
-                else {
-                    children.push(this.componentRender(child));
-                    if (!this.firstRending) {
-                        invokeListener(child, 'onParentSlotUpdated');
-                    }
-                }
-            }
-            const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
-                a[b[0]] = b[1];
-                return a;
-            }, {})));
-            if (vNode.classes.size) {
-                props.className = Array.from(vNode.classes).join(' ');
-            }
-            if (vNode.styles) {
-                props.style = Array.from(vNode.styles).reduce((a, b) => {
-                    a[b[0]] = b[1];
-                    return a;
-                }, {});
-            }
-            return createElement(vNode.tagName, props, ...children);
-        };
-        const refFn = (nativeNode) => {
-            if (!nativeNode) {
-                this.slotRootNativeElementCaches.remove(slot);
-            }
-            else {
-                this.slotRootNativeElementCaches.set(slot, nativeNode);
-            }
-        };
-        const currentRef = vElement.attrs.get('ref');
-        if (currentRef) {
-            vElement.attrs.set('ref', (v) => {
-                refFn(v);
-                if (typeof currentRef === 'function') {
-                    currentRef(v);
-                }
-                else if (!currentRef.current) {
-                    currentRef.current = v;
-                }
-            });
-        }
-        else {
-            vElement.attrs.set('ref', refFn);
-        }
-        slot.__changeMarker__.rendered();
-        return vNodeToJSX(vElement);
+    copy() {
+        document.execCommand('copy');
     }
 }
 
-export { Adapter };
+export { ReactAdapter };

package/bundles/index.js

@@ -1,32 +1,83 @@
 'use strict';
 
-var react = require('react');
-var stream = require('@tanbo/stream');
 var core = require('@textbus/core');
 var platformBrowser = require('@textbus/platform-browser');
+var react = require('react');
 
-// hack start
-// 在 composition 输入时，浏览器会默认删除占位节点（<br>），这会导致 react 在 diff 时报错
-const oldRemoveChild = Node.prototype.removeChild;
-Node.prototype.removeChild = function (child) {
-    if (child) {
-        if (!child.parentNode) {
-            return child;
-        }
-    }
-    return oldRemoveChild.call(this, child);
-};
-// hack end
 const adapterError = core.makeError('ReactAdapter');
-/**
- * Textbus 桥接 React 渲染能力适配器，用于在 React 项目中渲染 Textbus 数据
- */
-class Adapter extends platformBrowser.DomAdapter {
+class ReactAdapter extends platformBrowser.DomAdapter {
     constructor(components, mount) {
-        super(mount);
-        this.onViewUpdated = new stream.Subject();
+        super({
+            createCompositionNode(compositionState, updateNativeCompositionNode) {
+                return new core.VElement('span', {
+                    style: {
+                        textDecoration: 'underline'
+                    },
+                    ref: (node) => {
+                        updateNativeCompositionNode(node);
+                    }
+                }, [
+                    new core.VTextNode(compositionState.text)
+                ]);
+            },
+            getParentNode(node) {
+                return node.parentNode;
+            },
+            getChildNodes(parentElement) {
+                return Array.from(parentElement.childNodes);
+            },
+            isNativeElementNode(node) {
+                return node instanceof HTMLElement;
+            },
+            getChildByIndex(parentElement, index) {
+                return parentElement.childNodes[index];
+            },
+            getAndUpdateSlotRootNativeElement(vEle, update) {
+                const currentRef = vEle.attrs.get('ref');
+                if (currentRef) {
+                    vEle.attrs.set('ref', (v) => {
+                        update(v);
+                        if (typeof currentRef === 'function') {
+                            currentRef(v);
+                        }
+                        else if (!currentRef.current) {
+                            currentRef.current = v;
+                        }
+                    });
+                }
+                else {
+                    vEle.attrs.set('ref', update);
+                }
+            },
+            componentRender: (component) => {
+                const comp = this.components[component.name] || this.components['*'];
+                if (comp) {
+                    component.changeMarker.rendered();
+                    return react.createElement(comp, {
+                        key: component.id,
+                        component
+                    });
+                }
+                throw adapterError(`cannot found view component \`${component.name}\`!`);
+            },
+            vElementToViewElement(vNode, children) {
+                const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
+                    a[b[0]] = b[1];
+                    return a;
+                }, {})));
+                if (vNode.classes.size) {
+                    props.className = Array.from(vNode.classes).join(' ');
+                }
+                if (vNode.styles) {
+                    props.style = Array.from(vNode.styles).reduce((a, b) => {
+                        a[b[0]] = b[1];
+                        return a;
+                    }, {});
+                }
+                return react.createElement(vNode.tagName, props, ...children);
+            }
+        }, mount);
         this.components = {};
-        this.componentRendingStack = [];
         Object.keys(components).forEach(key => {
             this.components[key] = (props) => {
                 const component = props.component;
@@ -72,101 +123,9 @@ class Adapter extends platformBrowser.DomAdapter {
             };
         });
     }
-    componentRender(component) {
-        const comp = this.components[component.name] || this.components['*'];
-        if (comp) {
-            component.changeMarker.rendered();
-            return react.createElement(comp, {
-                key: component.id,
-                component
-            });
-        }
-        throw adapterError(`cannot found view component \`${component.name}\`!`);
-    }
-    slotRender(slot, slotHostRender, renderEnv) {
-        var _a;
-        const context = this.componentRendingStack[this.componentRendingStack.length - 1];
-        if (context) {
-            context.__slots__.push(slot);
-        }
-        else if (!this.renderedSlotCache.has(slot)) {
-            throw adapterError(`Unrendered slots must be rendered together with the corresponding "${((_a = slot.parent) === null || _a === void 0 ? void 0 : _a.name) || 'unknown'}" component`);
-        }
-        this.renderedSlotCache.set(slot, true);
-        const vElement = slot.toTree(slotHostRender, renderEnv);
-        this.slotRootVElementCaches.set(slot, vElement);
-        const vNodeToJSX = (vNode) => {
-            const children = [];
-            if (this.composition && this.composition.slot === slot) {
-                this.insertCompositionByIndex(slot, vNode, this.composition, () => {
-                    return new core.VElement('span', {
-                        style: {
-                            textDecoration: 'underline'
-                        },
-                        ref: (node) => {
-                            this.compositionNode = node;
-                        }
-                    }, [
-                        new core.VTextNode(this.composition.text)
-                    ]);
-                });
-            }
-            for (let i = 0; i < vNode.children.length; i++) {
-                const child = vNode.children[i];
-                if (child instanceof core.VElement) {
-                    children.push(vNodeToJSX(child));
-                }
-                else if (child instanceof core.VTextNode) {
-                    children.push(core.replaceEmpty(child.textContent));
-                }
-                else {
-                    children.push(this.componentRender(child));
-                    if (!this.firstRending) {
-                        core.invokeListener(child, 'onParentSlotUpdated');
-                    }
-                }
-            }
-            const props = Object.assign({}, (Array.from(vNode.attrs).reduce((a, b) => {
-                a[b[0]] = b[1];
-                return a;
-            }, {})));
-            if (vNode.classes.size) {
-                props.className = Array.from(vNode.classes).join(' ');
-            }
-            if (vNode.styles) {
-                props.style = Array.from(vNode.styles).reduce((a, b) => {
-                    a[b[0]] = b[1];
-                    return a;
-                }, {});
-            }
-            return react.createElement(vNode.tagName, props, ...children);
-        };
-        const refFn = (nativeNode) => {
-            if (!nativeNode) {
-                this.slotRootNativeElementCaches.remove(slot);
-            }
-            else {
-                this.slotRootNativeElementCaches.set(slot, nativeNode);
-            }
-        };
-        const currentRef = vElement.attrs.get('ref');
-        if (currentRef) {
-            vElement.attrs.set('ref', (v) => {
-                refFn(v);
-                if (typeof currentRef === 'function') {
-                    currentRef(v);
-                }
-                else if (!currentRef.current) {
-                    currentRef.current = v;
-                }
-            });
-        }
-        else {
-            vElement.attrs.set('ref', refFn);
-        }
-        slot.__changeMarker__.rendered();
-        return vNodeToJSX(vElement);
+    copy() {
+        document.execCommand('copy');
     }
 }
 
-exports.Adapter = Adapter;
+exports.ReactAdapter = ReactAdapter;

package/bundles/public-api.d.ts

@@ -1 +1 @@
-export * from './adapter';
+export * from './react-adapter';

package/bundles/react-adapter.d.ts

@@ -0,0 +1,15 @@
+import { Component, ViewMount } from '@textbus/core';
+import { DomAdapter } from '@textbus/platform-browser';
+import { JSX } from 'react';
+export interface ViewComponentProps<T extends Component> {
+    component: T;
+    rootRef: ((rootNode: HTMLElement) => void);
+}
+export interface ReactAdapterComponents {
+    [key: string]: (props: ViewComponentProps<any>) => JSX.Element;
+}
+export declare class ReactAdapter extends DomAdapter<JSX.Element, JSX.Element> {
+    private components;
+    constructor(components: ReactAdapterComponents, mount: ViewMount<JSX.Element, HTMLElement>);
+    copy(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/adapter-react",
-  "version": "4.0.0-alpha.41",
+  "version": "4.0.0-alpha.42",
   "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.3",
-    "@textbus/core": "^4.0.0-alpha.41",
-    "@textbus/platform-browser": "^4.0.0-alpha.41",
+    "@textbus/core": "^4.0.0-alpha.42",
+    "@textbus/platform-browser": "^4.0.0-alpha.42",
     "react": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -49,5 +49,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "b5c18b176790c339fb7fb35e3d427b8a81ffcd84"
+  "gitHead": "690f066925bac5379883f54f470684c74645d12e"
 }

package/bundles/adapter.d.ts

@@ -1,22 +0,0 @@
-import { JSX } from 'react';
-import { Subject } from '@tanbo/stream';
-import { Component, Slot, VElement, VTextNode } from '@textbus/core';
-import { DomAdapter } from '@textbus/platform-browser';
-export interface ViewComponentProps<T extends Component> {
-    component: T;
-    rootRef: ((rootNode: HTMLElement) => void);
-}
-export interface ReactAdapterComponents {
-    [key: string]: (props: ViewComponentProps<any>) => JSX.Element;
-}
-/**
- * Textbus 桥接 React 渲染能力适配器，用于在 React 项目中渲染 Textbus 数据
- */
-export declare class Adapter extends DomAdapter<JSX.Element, JSX.Element> {
-    onViewUpdated: Subject<void>;
-    private components;
-    private componentRendingStack;
-    constructor(components: ReactAdapterComponents, mount: (host: HTMLElement, root: JSX.Element) => (void | (() => void)));
-    componentRender(component: Component): JSX.Element;
-    slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | Component>) => VElement, renderEnv?: any): JSX.Element;
-}