@textbus/adapter-react 4.0.0-alpha.6 → 4.0.0-alpha.60

package/bundles/index.esm.js

@@ -1,28 +1,80 @@
-import { useState, useEffect, createElement } from 'react';
-import { Subject } from '@tanbo/stream';
-import { makeError, VElement, VTextNode, replaceEmpty } 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 = {};
         Object.keys(components).forEach(key => {
             this.components[key] = (props) => {
@@ -41,7 +93,10 @@ class Adapter extends DomAdapter {
                 useEffect(() => {
                     this.onViewUpdated.next();
                 }, [updateKey]);
-                return components[key]({
+                component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
+                component.__slots__.length = 0;
+                this.componentRendingStack.push(component);
+                const vNode = components[key]({
                     component,
                     rootRef: (rootNode) => {
                         if (rootNode) {
@@ -52,78 +107,23 @@ class Adapter extends DomAdapter {
                         }
                     }
                 });
+                useEffect(() => {
+                    const context = this.componentRendingStack[this.componentRendingStack.length - 1];
+                    if (context === component) {
+                        this.componentRendingStack.pop();
+                    }
+                    if (!this.componentRootElementCaches.get(component)) {
+                        // eslint-disable-next-line max-len
+                        throw adapterError(`Component \`${component.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
+                    }
+                });
+                return vNode;
             };
         });
     }
-    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) {
-        const vElement = slot.toTree(slotHostRender, renderEnv);
-        this.slotRootVElementCaches.set(slot, vElement);
-        const vNodeToJSX = (vNode) => {
-            const children = [];
-            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));
-                }
-            }
-            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(nativeNode);
-            }
-            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,30 +1,82 @@
 '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 = {};
         Object.keys(components).forEach(key => {
             this.components[key] = (props) => {
@@ -43,7 +95,10 @@ class Adapter extends platformBrowser.DomAdapter {
                 react.useEffect(() => {
                     this.onViewUpdated.next();
                 }, [updateKey]);
-                return components[key]({
+                component.__slots__.forEach(i => this.renderedSlotCache.delete(i));
+                component.__slots__.length = 0;
+                this.componentRendingStack.push(component);
+                const vNode = components[key]({
                     component,
                     rootRef: (rootNode) => {
                         if (rootNode) {
@@ -54,78 +109,23 @@ class Adapter extends platformBrowser.DomAdapter {
                         }
                     }
                 });
+                react.useEffect(() => {
+                    const context = this.componentRendingStack[this.componentRendingStack.length - 1];
+                    if (context === component) {
+                        this.componentRendingStack.pop();
+                    }
+                    if (!this.componentRootElementCaches.get(component)) {
+                        // eslint-disable-next-line max-len
+                        throw adapterError(`Component \`${component.name}\` is not bound to rootRef, you must bind rootRef to the root element node of the component view.`);
+                    }
+                });
+                return vNode;
             };
         });
     }
-    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) {
-        const vElement = slot.toTree(slotHostRender, renderEnv);
-        this.slotRootVElementCaches.set(slot, vElement);
-        const vNodeToJSX = (vNode) => {
-            const children = [];
-            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));
-                }
-            }
-            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(nativeNode);
-            }
-            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.6",
+  "version": "4.0.0-alpha.60",
   "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",
@@ -25,10 +25,10 @@
     "typescript editor"
   ],
   "dependencies": {
-    "@tanbo/stream": "^1.2.0",
-    "@textbus/core": "^4.0.0-alpha.6",
-    "@textbus/platform-browser": "^4.0.0-alpha.6",
-    "react": "^18.2.0"
+    "@tanbo/stream": "^1.2.4",
+    "@textbus/core": "^4.0.0-alpha.60",
+    "@textbus/platform-browser": "^4.0.0-alpha.60",
+    "react": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -49,5 +49,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "47394e77de252fdfd9193e1620177f944976c1a9"
+  "gitHead": "bae80846bc8c26754af661e35dea236db237aeeb"
 }

package/bundles/adapter.d.ts

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