@textbus/xnote 0.0.1-alpha.35 → 0.0.1-alpha.37

package/bundles/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
-import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, getCurrentInstance, watch } from '@viewfly/core';
-import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, Slot, Component, Registry, Query, QueryStateType, createVNode, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
+import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, getCurrentInstance, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, watch } from '@viewfly/core';
+import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, createVNode, Slot, Component, Registry, Query, QueryStateType, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
 import { VIEW_CONTAINER, isMac, DomAdapter, Input, SelectionBridge, BrowserModule, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, Parser } from '@textbus/platform-browser';
 import { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
 import { useProduce } from '@viewfly/hooks';
@@ -30,6 +30,18 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol */
 
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -700,6 +712,23 @@ function useBlockContent(slot) {
     });
 }
 
+function SlotRender(props) {
+    const adaper = inject(DomAdapter);
+    const instance = getCurrentInstance();
+    const sub = props.slot.__changeMarker__.onChange.subscribe(() => {
+        instance.markAsDirtied();
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const { slot, tag = 'div', renderEnv = false, elRef, elKey } = props, rest = __rest(props, ["slot", "tag", "renderEnv", "elRef", "elKey"]);
+        return adaper.slotRender(slot, children => {
+            return createVNode(tag, Object.assign({ ref: elRef, key: elKey }, rest), children);
+        }, renderEnv);
+    };
+}
+
 class BlockquoteComponent extends Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(Registry).createSlot(json.slot);
@@ -793,14 +822,11 @@ function registerBlockquoteShortcut(textbus) {
     });
 }
 function BlockquoteView(props) {
-    const adapter = inject(DomAdapter);
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
         const slot = props.component.state.slot;
-        return (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
-                return createVNode('div', null, children);
-            }, readonly() || output()) }));
+        return (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: jsx(SlotRender, { slot: slot, renderEnv: readonly() || output() }) }));
     };
 }
 const blockquoteComponentLoader = {
@@ -848,7 +874,6 @@ HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '
 HighlightBoxComponent.componentName = 'HighlightBoxComponent';
 HighlightBoxComponent.type = ContentType.BlockComponent;
 function HighlightBoxView(props) {
-    const adapter = inject(DomAdapter);
     const readonly = useReadonly();
     const output = useOutput();
     const emoji = [];
@@ -864,22 +889,14 @@ function HighlightBoxView(props) {
     return () => {
         const { state, name } = props.component;
         if (readonly() || output()) {
-            return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
-                        return createVNode('div', {
-                            class: 'xnote-highlight-box-content'
-                        }, children);
-                    }, readonly() || output())] }));
+            return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
         }
         return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "282px", menu: jsxs("div", { class: "xnote-highlight-box-icons", children: [jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
                                     return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
                                 }), jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
                                     const icon = String.fromCodePoint(i);
                                     return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
-                    return createVNode('div', {
-                        class: 'xnote-highlight-box-content'
-                    }, children);
-                }, readonly() || output())] }));
+                                })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
     };
 }
 const highlightBoxComponentLoader = {
@@ -947,14 +964,11 @@ class ParagraphComponent extends Component {
 ParagraphComponent.componentName = 'ParagraphComponent';
 ParagraphComponent.type = ContentType.BlockComponent;
 function ParagraphView(props) {
-    const adapter = inject(DomAdapter);
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
         const slot = props.component.state.slot;
-        return (jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: adapter.slotRender(slot, children => {
-                return (createVNode('div', null, children));
-            }, readonly() || output()) }));
+        return (jsx(SlotRender, { tag: 'div', slot: slot, class: "xnote-paragraph", elRef: props.rootRef, "data-component": ParagraphComponent.componentName, renderEnv: readonly() || output() }));
     };
 }
 const paragraphComponentLoader = {
@@ -2106,7 +2120,6 @@ TodolistComponent.zenCoding = {
     }
 };
 function TodolistView(props) {
-    const adapter = inject(DomAdapter);
     const component = props.component;
     const state = component.state;
     function toggle() {
@@ -2135,11 +2148,7 @@ function TodolistView(props) {
                 marginLeft: indent * 24 + 'px',
                 justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
                 textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
-            }, children: [jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), adapter.slotRender(slot, children => {
-                    return createVNode('div', {
-                        class: 'xnote-todolist-content'
-                    }, children);
-                }, readonly() || output())] }));
+            }, children: [jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsx(SlotRender, { slot: slot, tag: 'div', class: 'xnote-todolist-content', renderEnv: readonly() || output() })] }));
     };
 }
 const todolistComponentLoader = {
@@ -2339,7 +2348,6 @@ function numberToLetter(num) {
     }).join('');
 }
 function ListComponentView(props) {
-    const adapter = inject(DomAdapter);
     const component = props.component;
     function reorder(is) {
         component.state.reorder = is;
@@ -2413,11 +2421,7 @@ function ListComponentView(props) {
                 }, children: [jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
                             jsx("span", { class: "xnote-order-btn", children: icon })
                             :
-                                jsx(Dropdown, { menu: jsxs(Fragment, { children: [jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), adapter.slotRender(component.state.slot, children => {
-                        return createVNode('div', {
-                            class: 'xnote-list-content'
-                        }, children);
-                    }, readonly() || output())] }) }));
+                                jsx(Dropdown, { menu: jsxs(Fragment, { children: [jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), jsx(SlotRender, { slot: component.state.slot, class: 'xnote-list-content', renderEnv: readonly() || output() })] }) }));
     };
 }
 const listComponentLoader = {
@@ -4601,7 +4605,6 @@ AtComponent.componentName = 'AtComponent';
 AtComponent.type = ContentType.InlineComponent;
 
 function AtComponentView(props) {
-    const adapter = inject(DomAdapter);
     const selection = inject(Selection);
     const dropdownRef = createRef();
     const subscription = props.component.focus.subscribe((b) => {
@@ -4642,11 +4645,7 @@ function AtComponentView(props) {
             return (jsxs("div", { class: "xnote-at xnote-at-complete", "data-info": encodeURIComponent(JSON.stringify(userInfo)), ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), userInfo.name] }));
         }
         if (readonly() || output()) {
-            return (jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
-                        return createVNode('span', {
-                            class: 'xnote-at-input'
-                        }, children);
-                    })] }));
+            return (jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), slot && jsx(SlotRender, { slot: slot, class: 'xnote-at-input', tag: "span" })] }));
         }
         const members = props.component.members();
         return (jsx("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
@@ -4662,11 +4661,7 @@ function AtComponentView(props) {
                                 selection.selectComponentEnd(props.component);
                             }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsx("img", { src: member.avatar, alt: member.name }) :
                                         jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color }, children: member.name }) }), jsxs("div", { class: "xnote-at-member-info", children: [jsx("div", { class: "xnote-at-member-name", children: member.name }), jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
-                    }) }), children: [jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
-                        return createVNode('span', {
-                            class: 'xnote-at-input'
-                        }, children);
-                    })] }) }));
+                    }) }), children: [jsx("span", { children: "@" }), slot && jsx(SlotRender, { slot: slot, tag: 'span', class: 'xnote-at-input' })] }) }));
     };
 }
 const atComponentLoader = {
@@ -4719,7 +4714,6 @@ class RootComponent extends Component {
 RootComponent.componentName = 'RootComponent';
 RootComponent.type = ContentType.BlockComponent;
 function RootView(props) {
-    const adapter = inject(DomAdapter);
     const { content } = props.component.state;
     const ref = createDynamicRef(node => {
         const sub = props.component.onCompositionStart.subscribe(() => {
@@ -4736,12 +4730,7 @@ function RootView(props) {
     const output = useOutput();
     return () => {
         const { rootRef } = props;
-        return (jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-comopnent": props.component.name, children: adapter.slotRender(content, children => {
-                return (createVNode('div', {
-                    class: 'xnote-content',
-                    'data-placeholder': content.isEmpty ? '请输入内容' : ''
-                }, children));
-            }, readonly() || output()) }));
+        return (jsx("div", { class: "xnote-root", dir: 'auto', ref: [rootRef, ref], "data-component": props.component.name, children: jsx(SlotRender, { slot: content, tag: 'div', class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
     };
 }
 const rootComponentLoader = {
@@ -5258,6 +5247,7 @@ function SelectionMask(props) {
     });
 }
 
+// import { SlotRender } from '../SlotRender'
 const TableComponentView = withAnnotation({
     providers: [TableService]
 }, function TableComponentView(props) {

package/bundles/index.js

@@ -32,6 +32,18 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol */
 
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -702,6 +714,23 @@ function useBlockContent(slot) {
     });
 }
 
+function SlotRender(props) {
+    const adaper = core.inject(platformBrowser.DomAdapter);
+    const instance = core.getCurrentInstance();
+    const sub = props.slot.__changeMarker__.onChange.subscribe(() => {
+        instance.markAsDirtied();
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const { slot, tag = 'div', renderEnv = false, elRef, elKey } = props, rest = __rest(props, ["slot", "tag", "renderEnv", "elRef", "elKey"]);
+        return adaper.slotRender(slot, children => {
+            return core$1.createVNode(tag, Object.assign({ ref: elRef, key: elKey }, rest), children);
+        }, renderEnv);
+    };
+}
+
 class BlockquoteComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(core$1.Registry).createSlot(json.slot);
@@ -795,14 +824,11 @@ function registerBlockquoteShortcut(textbus) {
     });
 }
 function BlockquoteView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
         const slot = props.component.state.slot;
-        return (jsxRuntime.jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
-                return core$1.createVNode('div', null, children);
-            }, readonly() || output()) }));
+        return (jsxRuntime.jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: jsxRuntime.jsx(SlotRender, { slot: slot, renderEnv: readonly() || output() }) }));
     };
 }
 const blockquoteComponentLoader = {
@@ -850,7 +876,6 @@ HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '
 HighlightBoxComponent.componentName = 'HighlightBoxComponent';
 HighlightBoxComponent.type = core$1.ContentType.BlockComponent;
 function HighlightBoxView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const readonly = useReadonly();
     const output = useOutput();
     const emoji = [];
@@ -866,22 +891,14 @@ function HighlightBoxView(props) {
     return () => {
         const { state, name } = props.component;
         if (readonly() || output()) {
-            return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
-                        return core$1.createVNode('div', {
-                            class: 'xnote-highlight-box-content'
-                        }, children);
-                    }, readonly() || output())] }));
+            return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
         }
         return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "282px", menu: jsxRuntime.jsxs("div", { class: "xnote-highlight-box-icons", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
                                     return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
                                 }), jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
                                     const icon = String.fromCodePoint(i);
                                     return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
-                    return core$1.createVNode('div', {
-                        class: 'xnote-highlight-box-content'
-                    }, children);
-                }, readonly() || output())] }));
+                                })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
     };
 }
 const highlightBoxComponentLoader = {
@@ -949,14 +966,11 @@ class ParagraphComponent extends core$1.Component {
 ParagraphComponent.componentName = 'ParagraphComponent';
 ParagraphComponent.type = core$1.ContentType.BlockComponent;
 function ParagraphView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
         const slot = props.component.state.slot;
-        return (jsxRuntime.jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: adapter.slotRender(slot, children => {
-                return (core$1.createVNode('div', null, children));
-            }, readonly() || output()) }));
+        return (jsxRuntime.jsx(SlotRender, { tag: 'div', slot: slot, class: "xnote-paragraph", elRef: props.rootRef, "data-component": ParagraphComponent.componentName, renderEnv: readonly() || output() }));
     };
 }
 const paragraphComponentLoader = {
@@ -2108,7 +2122,6 @@ TodolistComponent.zenCoding = {
     }
 };
 function TodolistView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const component = props.component;
     const state = component.state;
     function toggle() {
@@ -2137,11 +2150,7 @@ function TodolistView(props) {
                 marginLeft: indent * 24 + 'px',
                 justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
                 textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
-            }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), adapter.slotRender(slot, children => {
-                    return core$1.createVNode('div', {
-                        class: 'xnote-todolist-content'
-                    }, children);
-                }, readonly() || output())] }));
+            }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'div', class: 'xnote-todolist-content', renderEnv: readonly() || output() })] }));
     };
 }
 const todolistComponentLoader = {
@@ -2341,7 +2350,6 @@ function numberToLetter(num) {
     }).join('');
 }
 function ListComponentView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const component = props.component;
     function reorder(is) {
         component.state.reorder = is;
@@ -2415,11 +2423,7 @@ function ListComponentView(props) {
                 }, children: [jsxRuntime.jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
                             jsxRuntime.jsx("span", { class: "xnote-order-btn", children: icon })
                             :
-                                jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), adapter.slotRender(component.state.slot, children => {
-                        return core$1.createVNode('div', {
-                            class: 'xnote-list-content'
-                        }, children);
-                    }, readonly() || output())] }) }));
+                                jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), jsxRuntime.jsx(SlotRender, { slot: component.state.slot, class: 'xnote-list-content', renderEnv: readonly() || output() })] }) }));
     };
 }
 const listComponentLoader = {
@@ -4603,7 +4607,6 @@ AtComponent.componentName = 'AtComponent';
 AtComponent.type = core$1.ContentType.InlineComponent;
 
 function AtComponentView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const selection = core.inject(core$1.Selection);
     const dropdownRef = core.createRef();
     const subscription = props.component.focus.subscribe((b) => {
@@ -4644,11 +4647,7 @@ function AtComponentView(props) {
             return (jsxRuntime.jsxs("div", { class: "xnote-at xnote-at-complete", "data-info": encodeURIComponent(JSON.stringify(userInfo)), ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), userInfo.name] }));
         }
         if (readonly() || output()) {
-            return (jsxRuntime.jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
-                        return core$1.createVNode('span', {
-                            class: 'xnote-at-input'
-                        }, children);
-                    })] }));
+            return (jsxRuntime.jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, class: 'xnote-at-input', tag: "span" })] }));
         }
         const members = props.component.members();
         return (jsxRuntime.jsx("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxRuntime.jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsxRuntime.jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
@@ -4664,11 +4663,7 @@ function AtComponentView(props) {
                                 selection.selectComponentEnd(props.component);
                             }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsxRuntime.jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsxRuntime.jsx("img", { src: member.avatar, alt: member.name }) :
                                         jsxRuntime.jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color: color$1 }, children: member.name }) }), jsxRuntime.jsxs("div", { class: "xnote-at-member-info", children: [jsxRuntime.jsx("div", { class: "xnote-at-member-name", children: member.name }), jsxRuntime.jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
-                    }) }), children: [jsxRuntime.jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
-                        return core$1.createVNode('span', {
-                            class: 'xnote-at-input'
-                        }, children);
-                    })] }) }));
+                    }) }), children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'span', class: 'xnote-at-input' })] }) }));
     };
 }
 const atComponentLoader = {
@@ -4721,7 +4716,6 @@ class RootComponent extends core$1.Component {
 RootComponent.componentName = 'RootComponent';
 RootComponent.type = core$1.ContentType.BlockComponent;
 function RootView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const { content } = props.component.state;
     const ref = core.createDynamicRef(node => {
         const sub = props.component.onCompositionStart.subscribe(() => {
@@ -4738,12 +4732,7 @@ function RootView(props) {
     const output = useOutput();
     return () => {
         const { rootRef } = props;
-        return (jsxRuntime.jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-comopnent": props.component.name, children: adapter.slotRender(content, children => {
-                return (core$1.createVNode('div', {
-                    class: 'xnote-content',
-                    'data-placeholder': content.isEmpty ? '请输入内容' : ''
-                }, children));
-            }, readonly() || output()) }));
+        return (jsxRuntime.jsx("div", { class: "xnote-root", dir: 'auto', ref: [rootRef, ref], "data-component": props.component.name, children: jsxRuntime.jsx(SlotRender, { slot: content, tag: 'div', class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
     };
 }
 const rootComponentLoader = {
@@ -5260,6 +5249,7 @@ function SelectionMask(props) {
     });
 }
 
+// import { SlotRender } from '../SlotRender'
 const TableComponentView = core.withAnnotation({
     providers: [TableService]
 }, function TableComponentView(props) {

package/bundles/textbus/components/SlotRender.d.ts

@@ -0,0 +1,14 @@
+import { Slot } from '@textbus/core';
+import { DynamicRef } from '@viewfly/core';
+import { HTMLAttributes } from '@viewfly/platform-browser';
+interface Props extends HTMLAttributes<unknown> {
+    slot: Slot;
+    /** 默认值为 div */
+    tag?: string;
+    class?: string;
+    renderEnv?: boolean;
+    elRef?: DynamicRef<HTMLElement>;
+    elKey?: number | string;
+}
+export declare function SlotRender(props: Props): () => any;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/xnote",
-  "version": "0.0.1-alpha.35",
+  "version": "0.0.1-alpha.37",
   "description": "A high-performance rich text editor that supports multiplayer online collaboration.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",