@textbus/xnote 0.0.1-alpha.45 → 0.0.1-alpha.47

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, onSlotApplyFormat, onSlotSetAttribute, 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, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, 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);
@@ -701,6 +713,26 @@ function useBlockContent(slot) {
     });
 }
 
+function SlotRender(props) {
+    const adapter = inject(DomAdapter);
+    const instance = getCurrentInstance();
+    const slot = props.slot;
+    const sub = merge(slot.__changeMarker__.onChange, slot.__changeMarker__.onForceChange).subscribe(() => {
+        if (props.slot.__changeMarker__.dirty) {
+            instance.markAsDirtied();
+        }
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const { slot, tag = 'div', renderEnv = false, elRef, elKey } = props, rest = __rest(props, ["slot", "tag", "renderEnv", "elRef", "elKey"]);
+        return adapter.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);
@@ -715,6 +747,9 @@ class BlockquoteComponent extends Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         useBlockContent(this.state.slot);
     }
@@ -755,7 +790,7 @@ function toBlockquote(textbus) {
         const index = parent.indexOf(current);
         parent.retain(index);
         commander.removeComponent(current);
-        current.__slots__.get(0).sliceContent().forEach(i => {
+        current.slots.at(0).sliceContent().forEach(i => {
             parent.insert(i);
         });
     }
@@ -794,14 +829,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 = {
@@ -841,6 +873,9 @@ class HighlightBoxComponent extends Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         useBlockContent(this.state.slot);
     }
@@ -849,7 +884,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 = [];
@@ -865,22 +899,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 = {
@@ -921,6 +947,9 @@ class ParagraphComponent extends Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const injector = useContext();
         const commander = injector.get(Commander);
@@ -948,14 +977,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("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: jsx(SlotRender, { tag: "div", slot: slot, renderEnv: readonly() || output() }) }));
     };
 }
 const paragraphComponentLoader = {
@@ -1169,6 +1195,9 @@ class SourceCodeComponent extends Component {
             theme: json.theme
         });
     }
+    getSlots() {
+        return this.state.slots.map(i => i.slot);
+    }
     setup() {
         const textbus = useContext();
         const selection = useContext(Selection);
@@ -1807,6 +1836,9 @@ class TableComponent extends Component {
         this.focus = new Subject();
         this.tableSelection = createSignal(null);
     }
+    getSlots() {
+        return this.state.rows.map(i => i.cells.map(j => j.slot)).flat();
+    }
     setup() {
         const selection = useContext(Selection);
         onFocusIn(() => {
@@ -2044,6 +2076,9 @@ class TodolistComponent extends Component {
             checked: json.checked
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = useContext();
         const commander = useContext(Commander);
@@ -2124,7 +2159,6 @@ TodolistComponent.zenCoding = {
     }
 };
 function TodolistView(props) {
-    const adapter = inject(DomAdapter);
     const component = props.component;
     const state = component.state;
     function toggle() {
@@ -2153,11 +2187,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 = {
@@ -2218,6 +2248,9 @@ class ListComponent extends Component {
             slot: textbus.get(Registry).createSlot(json.slot)
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = useContext();
         const commander = useContext(Commander);
@@ -2357,7 +2390,6 @@ function numberToLetter(num) {
     }).join('');
 }
 function ListComponentView(props) {
-    const adapter = inject(DomAdapter);
     const component = props.component;
     function reorder(is) {
         component.state.reorder = is;
@@ -2431,11 +2463,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 = {
@@ -2675,7 +2703,7 @@ function useBlockTransform() {
                         const index = parent.indexOf(current);
                         parent.retain(index);
                         commander.removeComponent(current);
-                        current.__slots__.get(0).sliceContent().forEach(i => {
+                        current.slots.at(0).sliceContent().forEach(i => {
                             parent.insert(i);
                         });
                     }
@@ -3575,6 +3603,9 @@ class ImageComponent extends Component {
     static fromJSON(textbus, json) {
         return new ImageComponent(textbus, Object.assign({}, json));
     }
+    getSlots() {
+        return [];
+    }
 }
 ImageComponent.type = ContentType.InlineComponent;
 ImageComponent.componentName = 'ImageComponent';
@@ -3614,8 +3645,8 @@ class VideoComponent extends Component {
     static fromJSON(textbus, json) {
         return new VideoComponent(textbus, Object.assign({}, json));
     }
-    setup() {
-        //
+    getSlots() {
+        return [];
     }
 }
 VideoComponent.type = ContentType.InlineComponent;
@@ -3723,6 +3754,9 @@ class KatexComponent extends Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [];
+    }
 }
 KatexComponent.componentName = 'KatexComponent';
 KatexComponent.type = ContentType.InlineComponent;
@@ -4102,7 +4136,7 @@ const LeftToolbar = withAnnotation({
         if (!slot) {
             return;
         }
-        if (slot.parent.__slots__.length <= 1) {
+        if (slot.parent.slots.length <= 1) {
             commander.removeComponent(slot.parent);
         }
         else {
@@ -4532,6 +4566,12 @@ class AtComponent extends Component {
         this.members = createSignal([]);
         this.selectedIndex = createSignal(0);
     }
+    getSlots() {
+        if (this.state.slot) {
+            return [this.state.slot];
+        }
+        return [];
+    }
     setup() {
         let isFocus = false;
         onFocus(() => {
@@ -4619,7 +4659,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) => {
@@ -4660,11 +4699,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) => {
@@ -4680,11 +4715,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 = {
@@ -4716,6 +4747,9 @@ class RootComponent extends Component {
             content
         });
     }
+    getSlots() {
+        return [this.state.content];
+    }
     setup() {
         useBlockContent((slot) => slot === this.state.content);
         onCompositionStart(ev => {
@@ -4743,7 +4777,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(() => {
@@ -4760,12 +4793,7 @@ function RootView(props) {
     const output = useOutput();
     return () => {
         const { rootRef } = props;
-        return (jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": 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 = {
@@ -5284,6 +5312,7 @@ function SelectionMask(props) {
     });
 }
 
+// import { SlotRender } from '../SlotRender'
 const TableComponentView = withAnnotation({
     providers: [TableService]
 }, function TableComponentView(props) {
@@ -5332,7 +5361,7 @@ const TableComponentView = withAnnotation({
                                             }) }, rowMapping.get(row)));
                                     }) })] }) }) }) }));
         }
-        return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, children: jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
+        return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.layoutWidth.join(',')}]`, children: jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
                                         'xnote-table-content',
                                         {
                                             'hide-selection': props.component.tableSelection()
@@ -5357,10 +5386,11 @@ const tableComponentLoader = {
         return element.dataset.component === TableComponent.componentName || element.tagName === 'TABLE';
     },
     read(element, textbus, slotParser) {
+        let content = element;
         if (element.tagName === 'DIV') {
-            element = element.querySelector('.xnote-table-content');
+            content = element.querySelector('.xnote-table-content');
         }
-        const { tHead, tBodies, tFoot } = element;
+        const { tHead, tBodies, tFoot } = content;
         const headers = [];
         const bodies = [];
         if (tHead) {
@@ -5505,7 +5535,7 @@ function autoComplete(table) {
 function findFocusCell(table, slot) {
     var _a;
     while (slot) {
-        if (table.__slots__.includes(slot)) {
+        if (table.slots.includes(slot)) {
             return slot;
         }
         slot = (_a = slot.parent) === null || _a === void 0 ? void 0 : _a.parent;

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);
@@ -703,6 +715,26 @@ function useBlockContent(slot) {
     });
 }
 
+function SlotRender(props) {
+    const adapter = core.inject(platformBrowser.DomAdapter);
+    const instance = core.getCurrentInstance();
+    const slot = props.slot;
+    const sub = core$1.merge(slot.__changeMarker__.onChange, slot.__changeMarker__.onForceChange).subscribe(() => {
+        if (props.slot.__changeMarker__.dirty) {
+            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 adapter.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);
@@ -717,6 +749,9 @@ class BlockquoteComponent extends core$1.Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         useBlockContent(this.state.slot);
     }
@@ -757,7 +792,7 @@ function toBlockquote(textbus) {
         const index = parent.indexOf(current);
         parent.retain(index);
         commander.removeComponent(current);
-        current.__slots__.get(0).sliceContent().forEach(i => {
+        current.slots.at(0).sliceContent().forEach(i => {
             parent.insert(i);
         });
     }
@@ -796,14 +831,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 = {
@@ -843,6 +875,9 @@ class HighlightBoxComponent extends core$1.Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         useBlockContent(this.state.slot);
     }
@@ -851,7 +886,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 = [];
@@ -867,22 +901,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 = {
@@ -923,6 +949,9 @@ class ParagraphComponent extends core$1.Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const injector = core$1.useContext();
         const commander = injector.get(core$1.Commander);
@@ -950,14 +979,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("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: jsxRuntime.jsx(SlotRender, { tag: "div", slot: slot, renderEnv: readonly() || output() }) }));
     };
 }
 const paragraphComponentLoader = {
@@ -1171,6 +1197,9 @@ class SourceCodeComponent extends core$1.Component {
             theme: json.theme
         });
     }
+    getSlots() {
+        return this.state.slots.map(i => i.slot);
+    }
     setup() {
         const textbus = core$1.useContext();
         const selection = core$1.useContext(core$1.Selection);
@@ -1809,6 +1838,9 @@ class TableComponent extends core$1.Component {
         this.focus = new core$1.Subject();
         this.tableSelection = core.createSignal(null);
     }
+    getSlots() {
+        return this.state.rows.map(i => i.cells.map(j => j.slot)).flat();
+    }
     setup() {
         const selection = core$1.useContext(core$1.Selection);
         core$1.onFocusIn(() => {
@@ -2046,6 +2078,9 @@ class TodolistComponent extends core$1.Component {
             checked: json.checked
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = core$1.useContext();
         const commander = core$1.useContext(core$1.Commander);
@@ -2126,7 +2161,6 @@ TodolistComponent.zenCoding = {
     }
 };
 function TodolistView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const component = props.component;
     const state = component.state;
     function toggle() {
@@ -2155,11 +2189,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 = {
@@ -2220,6 +2250,9 @@ class ListComponent extends core$1.Component {
             slot: textbus.get(core$1.Registry).createSlot(json.slot)
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = core$1.useContext();
         const commander = core$1.useContext(core$1.Commander);
@@ -2359,7 +2392,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;
@@ -2433,11 +2465,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 = {
@@ -2677,7 +2705,7 @@ function useBlockTransform() {
                         const index = parent.indexOf(current);
                         parent.retain(index);
                         commander.removeComponent(current);
-                        current.__slots__.get(0).sliceContent().forEach(i => {
+                        current.slots.at(0).sliceContent().forEach(i => {
                             parent.insert(i);
                         });
                     }
@@ -3577,6 +3605,9 @@ class ImageComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new ImageComponent(textbus, Object.assign({}, json));
     }
+    getSlots() {
+        return [];
+    }
 }
 ImageComponent.type = core$1.ContentType.InlineComponent;
 ImageComponent.componentName = 'ImageComponent';
@@ -3616,8 +3647,8 @@ class VideoComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new VideoComponent(textbus, Object.assign({}, json));
     }
-    setup() {
-        //
+    getSlots() {
+        return [];
     }
 }
 VideoComponent.type = core$1.ContentType.InlineComponent;
@@ -3725,6 +3756,9 @@ class KatexComponent extends core$1.Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [];
+    }
 }
 KatexComponent.componentName = 'KatexComponent';
 KatexComponent.type = core$1.ContentType.InlineComponent;
@@ -4104,7 +4138,7 @@ const LeftToolbar = core.withAnnotation({
         if (!slot) {
             return;
         }
-        if (slot.parent.__slots__.length <= 1) {
+        if (slot.parent.slots.length <= 1) {
             commander.removeComponent(slot.parent);
         }
         else {
@@ -4534,6 +4568,12 @@ class AtComponent extends core$1.Component {
         this.members = core.createSignal([]);
         this.selectedIndex = core.createSignal(0);
     }
+    getSlots() {
+        if (this.state.slot) {
+            return [this.state.slot];
+        }
+        return [];
+    }
     setup() {
         let isFocus = false;
         core$1.onFocus(() => {
@@ -4621,7 +4661,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) => {
@@ -4662,11 +4701,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) => {
@@ -4682,11 +4717,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 = {
@@ -4718,6 +4749,9 @@ class RootComponent extends core$1.Component {
             content
         });
     }
+    getSlots() {
+        return [this.state.content];
+    }
     setup() {
         useBlockContent((slot) => slot === this.state.content);
         core$1.onCompositionStart(ev => {
@@ -4745,7 +4779,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(() => {
@@ -4762,12 +4795,7 @@ function RootView(props) {
     const output = useOutput();
     return () => {
         const { rootRef } = props;
-        return (jsxRuntime.jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": 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 = {
@@ -5286,6 +5314,7 @@ function SelectionMask(props) {
     });
 }
 
+// import { SlotRender } from '../SlotRender'
 const TableComponentView = core.withAnnotation({
     providers: [TableService]
 }, function TableComponentView(props) {
@@ -5334,7 +5363,7 @@ const TableComponentView = core.withAnnotation({
                                             }) }, rowMapping.get(row)));
                                     }) })] }) }) }) }));
         }
-        return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
+        return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.layoutWidth.join(',')}]`, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
                                         'xnote-table-content',
                                         {
                                             'hide-selection': props.component.tableSelection()
@@ -5359,10 +5388,11 @@ const tableComponentLoader = {
         return element.dataset.component === TableComponent.componentName || element.tagName === 'TABLE';
     },
     read(element, textbus, slotParser) {
+        let content = element;
         if (element.tagName === 'DIV') {
-            element = element.querySelector('.xnote-table-content');
+            content = element.querySelector('.xnote-table-content');
         }
-        const { tHead, tBodies, tFoot } = element;
+        const { tHead, tBodies, tFoot } = content;
         const headers = [];
         const bodies = [];
         if (tHead) {
@@ -5507,7 +5537,7 @@ function autoComplete(table) {
 function findFocusCell(table, slot) {
     var _a;
     while (slot) {
-        if (table.__slots__.includes(slot)) {
+        if (table.slots.includes(slot)) {
             return slot;
         }
         slot = (_a = slot.parent) === null || _a === void 0 ? void 0 : _a.parent;

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/bundles/textbus/components/at/at.component.d.ts

@@ -30,5 +30,6 @@ export declare class AtComponent extends Component<AtComponentState> {
     members: import("@viewfly/core").Signal<Member[]>;
     selectedIndex: import("@viewfly/core").Signal<number>;
     constructor(textbus: Textbus, state?: AtComponentState);
+    getSlots(): Slot[];
     setup(): void;
 }

package/bundles/textbus/components/blockqoute/blockquote.component.d.ts

@@ -11,6 +11,7 @@ export declare class BlockquoteComponent extends Component<BlockquoteComponentSt
     static zenCoding: ZenCodingGrammarInterceptor<BlockquoteComponentState>;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<BlockquoteComponentState>): BlockquoteComponent;
     constructor(textbus: Textbus, state?: BlockquoteComponentState);
+    getSlots(): Slot[];
     setup(): void;
 }
 export declare function toBlockquote(textbus: Textbus): void;

package/bundles/textbus/components/highlight-box/highlight-box.component.d.ts

@@ -12,6 +12,7 @@ export declare class HighlightBoxComponent extends Component<HighlightBoxCompone
     static type: ContentType;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<HighlightBoxComponentState>): HighlightBoxComponent;
     constructor(textbus: Textbus, state?: HighlightBoxComponentState);
+    getSlots(): Slot[];
     setup(): void;
 }
 export declare function HighlightBoxView(props: ViewComponentProps<HighlightBoxComponent>): () => any;

package/bundles/textbus/components/image/image.component.d.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentStateLiteral, ContentType, Textbus } from '@textbus/core';
+import { Component, ComponentStateLiteral, ContentType, Slot, Textbus } from '@textbus/core';
 import { ViewComponentProps } from '@textbus/adapter-viewfly';
 import { ComponentLoader } from '@textbus/platform-browser';
 import './image.component.scss';
@@ -11,6 +11,7 @@ export declare class ImageComponent extends Component<ImageComponentState> {
     static type: ContentType;
     static componentName: string;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<ImageComponentState>): ImageComponent;
+    getSlots(): Slot[];
 }
 export declare function ImageView(props: ViewComponentProps<ImageComponent>): () => any;
 export declare const imageComponentLoader: ComponentLoader;

package/bundles/textbus/components/katex/katex.component.d.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentStateLiteral, ContentType, Textbus } from '@textbus/core';
+import { Component, ComponentStateLiteral, ContentType, Slot, Textbus } from '@textbus/core';
 import { ViewComponentProps } from '@textbus/adapter-viewfly';
 import { ComponentLoader } from '@textbus/platform-browser';
 import './katex.component.scss';
@@ -10,6 +10,7 @@ export declare class KatexComponent extends Component<KatexComponentState> {
     static type: ContentType;
     static fromJSON(textbus: Textbus, state: ComponentStateLiteral<KatexComponentState>): KatexComponent;
     constructor(textbus: Textbus, state?: KatexComponentState);
+    getSlots(): Slot[];
 }
 export declare function KatexComponentView(props: ViewComponentProps<KatexComponent>): () => any;
 export declare const katexComponentLoader: ComponentLoader;

package/bundles/textbus/components/list/list.component.d.ts

@@ -14,6 +14,7 @@ export declare class ListComponent extends Component<ListComponentState> {
     static type: ContentType;
     static zenCoding: ZenCodingGrammarInterceptor<ListComponentState>;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<ListComponentState>): ListComponent;
+    getSlots(): Slot[];
     setup(): void;
 }
 export declare function ListComponentView(props: ViewComponentProps<ListComponent>): () => any;

package/bundles/textbus/components/paragraph/paragraph.component.d.ts

@@ -10,6 +10,7 @@ export declare class ParagraphComponent extends Component<ParagraphComponentStat
     static type: ContentType;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<ParagraphComponentState>): ParagraphComponent;
     constructor(textbus: Textbus, state?: ParagraphComponentState);
+    getSlots(): Slot[];
     setup(): void;
 }
 export declare function ParagraphView(props: ViewComponentProps<ParagraphComponent>): () => any;

package/bundles/textbus/components/root/root.component.d.ts

@@ -10,6 +10,7 @@ export declare class RootComponent extends Component<RootComponentState> {
     static type: ContentType;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<RootComponentState>): RootComponent;
     onCompositionStart: Subject<Event<Slot, CompositionStartEventData>>;
+    getSlots(): Slot[];
     setup(): void;
     afterCheck(): void;
 }

package/bundles/textbus/components/source-code/source-code.component.d.ts

@@ -27,6 +27,7 @@ export declare class SourceCodeComponent extends Component<SourceCodeComponentSt
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<SourceCodeComponentState>): SourceCodeComponent;
     static zenCoding: ZenCodingGrammarInterceptor<SourceCodeComponentState>;
     focus: BehaviorSubject<boolean>;
+    getSlots(): Slot[];
     setup(): void;
     removeSlot(slot: Slot): boolean;
     cancelEmphasize: () => void;

package/bundles/textbus/components/table/table.component.d.ts

@@ -21,6 +21,7 @@ export declare class TableComponent extends Component<TableComponentState> {
     constructor(textbus: Textbus, state?: TableComponentState);
     focus: Subject<boolean>;
     tableSelection: import("@viewfly/core").Signal<TableSelection | null>;
+    getSlots(): Slot[];
     setup(): void;
     deleteColumn(index: number): void;
     deleteRow(index: number): void;

package/bundles/textbus/components/todolist/todolist.component.d.ts

@@ -11,6 +11,7 @@ export declare class TodolistComponent extends Component<TodolistComponentState>
     static componentName: string;
     static zenCoding: ZenCodingGrammarInterceptor<TodolistComponentState>;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<TodolistComponentState>): TodolistComponent;
+    getSlots(): Slot[];
     setup(): void;
 }
 export declare function TodolistView(props: ViewComponentProps<TodolistComponent>): () => any;

package/bundles/textbus/components/video/video.component.d.ts

@@ -11,7 +11,7 @@ export declare class VideoComponent extends Component<VideoComponentState> {
     static type: ContentType;
     static componentName: string;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<VideoComponentState>): VideoComponent;
-    setup(): void;
+    getSlots(): never[];
 }
 export declare function VideoView(props: ViewComponentProps<VideoComponent>): () => any;
 export declare const videoComponentLoader: ComponentLoader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/xnote",
-  "version": "0.0.1-alpha.45",
+  "version": "0.0.1-alpha.47",
   "description": "A high-performance rich text editor that supports multiplayer online collaboration.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -27,14 +27,14 @@
   },
   "dependencies": {
     "@tanbo/color": "^0.1.1",
-    "@textbus/adapter-viewfly": "^4.0.0-alpha.69",
-    "@textbus/collaborate": "^4.0.0-alpha.69",
-    "@textbus/core": "^4.0.0-alpha.69",
-    "@textbus/platform-browser": "^4.0.0-alpha.69",
-    "@viewfly/core": "^1.0.0-alpha.17",
-    "@viewfly/hooks": "^1.0.0-alpha.17",
-    "@viewfly/platform-browser": "^1.0.0-alpha.17",
-    "@viewfly/scoped-css": "^1.0.0-alpha.17",
+    "@textbus/adapter-viewfly": "^4.0.0-alpha.72",
+    "@textbus/collaborate": "^4.0.0-alpha.72",
+    "@textbus/core": "^4.0.0-alpha.72",
+    "@textbus/platform-browser": "^4.0.0-alpha.72",
+    "@viewfly/core": "^1.0.0-alpha.18",
+    "@viewfly/hooks": "^1.0.0-alpha.18",
+    "@viewfly/platform-browser": "^1.0.0-alpha.18",
+    "@viewfly/scoped-css": "^1.0.0-alpha.18",
     "highlight.js": "^11.9.0",
     "katex": "^0.16.10"
   },