@textbus/xnote 0.3.4 → 0.3.6

package/bundles/index.esm.js

@@ -1,11 +1,10 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
-import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, InjectionToken, withAnnotation, onUpdated, onMounted, onPropsChanged, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, Context, watch } from '@viewfly/core';
-import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, createVNode, merge, Slot, Component, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, onParentSlotUpdated, Textbus, History, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, delay, tap, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
+import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, InjectionToken, withAnnotation, onUpdated, onMounted, watch, reactive, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, createContext } from '@viewfly/core';
+import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, createVNode, merge, Slot, Component, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDetach, onGetRanges, onParentSlotUpdated, Textbus, History, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, delay, tap, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
 import { normalizeHex, hex2Hsl, hex2Rgb, hex2Hsv, hsl2Hex, hsl2Hsv, hsl2Rgb, rgb2Hsl, rgb2Hex, rgb2Hsv, hsv2Hex, hsv2Hsl, hsv2Rgb, any2Hsl, parseCss } from '@tanbo/color';
 import { VIEW_CONTAINER, isMac, DomAdapter, Input, BrowserModule, SelectionBridge, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, CollaborateCursor, Parser } from '@textbus/platform-browser';
 import { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
-import { useProduce } from '@viewfly/hooks';
 import highlightjs from 'highlight.js';
 import { v4 } from 'uuid';
 import Katex from 'katex';
@@ -1164,7 +1163,7 @@ function useBlockContent(slot) {
     const selection = textbus.get(Selection);
     onBreak(ev => {
         if (typeof slot === 'function' ? slot(ev.target) : ev.target === slot) {
-            const p = new ParagraphComponent(textbus);
+            const p = new ParagraphComponent();
             ev.target.insert(p);
             selection.setPosition(p.state.slot, 0);
             ev.preventDefault();
@@ -1173,7 +1172,7 @@ function useBlockContent(slot) {
     onContentInsert(ev => {
         if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
             (typeof ev.data.content === 'string' || ev.data.content.type !== ContentType.BlockComponent)) {
-            const p = new ParagraphComponent(textbus);
+            const p = new ParagraphComponent();
             const childSlot = p.state.slot;
             childSlot.insert(ev.data.content);
             ev.target.insert(p);
@@ -1195,10 +1194,12 @@ function SlotRender(props) {
         });
     }
     let sub = listen(slot);
-    onPropsChanged((currentProps, oldProps) => {
-        if (oldProps.slot !== currentProps.slot) {
+    watch(() => {
+        return props.slot;
+    }, (currentSlot, oldSlot) => {
+        if (oldSlot !== currentSlot) {
             sub.unsubscribe();
-            sub = listen(currentProps.slot);
+            sub = listen(currentSlot);
         }
     });
     onUnmounted(() => {
@@ -1215,16 +1216,16 @@ function SlotRender(props) {
 class BlockquoteComponent extends Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(Registry).createSlot(json.slot);
-        return new BlockquoteComponent(textbus, {
+        return new BlockquoteComponent({
             slot
         });
     }
-    constructor(textbus, state = {
+    constructor(state = {
         slot: new Slot([
             ContentType.BlockComponent
         ])
     }) {
-        super(textbus, state);
+        super(state);
     }
     getSlots() {
         return [this.state.slot];
@@ -1289,7 +1290,7 @@ function toBlockquote(textbus) {
         });
     }
     else {
-        const block = new BlockquoteComponent(textbus);
+        const block = new BlockquoteComponent();
         const slot = block.state.slot;
         if (selection.startSlot === selection.endSlot) {
             const parentComponent = selection.startSlot.parent;
@@ -1334,7 +1335,7 @@ const blockquoteComponentLoader = {
     match(element, returnableContentTypes) {
         return returnableContentTypes.includes(ContentType.BlockComponent) && element.tagName === 'BLOCKQUOTE';
     },
-    read(element, textbus, slotParser) {
+    read(element, _, slotParser) {
         const delta = slotParser(new Slot([
             ContentType.BlockComponent,
             ContentType.InlineComponent,
@@ -1343,10 +1344,10 @@ const blockquoteComponentLoader = {
         const slot = new Slot([
             ContentType.BlockComponent,
         ]);
-        deltaToBlock(delta, textbus).forEach(i => {
+        deltaToBlock(delta).forEach(i => {
             slot.insert(i);
         });
-        return new BlockquoteComponent(textbus, {
+        return new BlockquoteComponent({
             slot
         });
     },
@@ -1354,18 +1355,18 @@ const blockquoteComponentLoader = {
 
 class HighlightBoxComponent extends Component {
     static fromJSON(textbus, json) {
-        return new HighlightBoxComponent(textbus, {
+        return new HighlightBoxComponent({
             type: json.type,
             slot: textbus.get(Registry).createSlot(json.slot)
         });
     }
-    constructor(textbus, state = {
+    constructor(state = {
         type: '',
         slot: new Slot([
             ContentType.BlockComponent,
         ])
     }) {
-        super(textbus, state);
+        super(state);
     }
     getSlots() {
         return [this.state.slot];
@@ -1431,10 +1432,10 @@ const highlightBoxComponentLoader = {
         const slot = new Slot([
             ContentType.BlockComponent,
         ]);
-        deltaToBlock(delta, textbus).forEach(i => {
+        deltaToBlock(delta).forEach(i => {
             slot.insert(i);
         });
-        return new HighlightBoxComponent(textbus, {
+        return new HighlightBoxComponent({
             type: element.dataset.icon || '',
             slot
         });
@@ -1529,11 +1530,11 @@ const colorFormatLoader = {
     }
 };
 
-function createTimelineItem(textbus, theme) {
+function createTimelineItem(theme) {
     const slot = new Slot([
         ContentType.BlockComponent,
     ]);
-    const title = new ParagraphComponent(textbus);
+    const title = new ParagraphComponent();
     title.state.slot.insert('时间主题', [
         [fontSizeFormatter, '18px'],
         [boldFormatter, true]
@@ -1542,7 +1543,7 @@ function createTimelineItem(textbus, theme) {
         [fontSizeFormatter, '15px'],
         [colorFormatter, '#777']
     ]);
-    const desc = new ParagraphComponent(textbus);
+    const desc = new ParagraphComponent();
     desc.state.slot.insert('描述信息...');
     slot.insert(title);
     slot.insert(desc);
@@ -1551,7 +1552,7 @@ function createTimelineItem(textbus, theme) {
 class TimelineComponent extends Component {
     static fromJSON(textbus, json) {
         const registry = textbus.get(Registry);
-        return new TimelineComponent(textbus, {
+        return new TimelineComponent({
             items: json.items.map(i => {
                 return {
                     theme: i.theme,
@@ -1585,16 +1586,16 @@ Object.defineProperty(TimelineComponent, "type", {
     value: ContentType.BlockComponent
 });
 
-function createStepItem(textbus) {
+function createStepItem() {
     const slot = new Slot([
         ContentType.BlockComponent
     ]);
-    const title = new ParagraphComponent(textbus);
+    const title = new ParagraphComponent();
     title.state.slot.insert('标题', [
         [fontSizeFormatter, '18px'],
         [boldFormatter, true]
     ]);
-    const content = new ParagraphComponent(textbus);
+    const content = new ParagraphComponent();
     content.state.slot.insert('描述信息...');
     slot.insert(title);
     slot.insert(content);
@@ -1603,7 +1604,7 @@ function createStepItem(textbus) {
 class StepComponent extends Component {
     static fromJSON(textbus, json) {
         const registry = textbus.get(Registry);
-        return new StepComponent(textbus, {
+        return new StepComponent({
             step: json.step,
             items: json.items.map(i => {
                 return {
@@ -1643,17 +1644,17 @@ Object.defineProperty(StepComponent, "type", {
 class ParagraphComponent extends Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(Registry).createSlot(json.slot);
-        return new ParagraphComponent(textbus, {
+        return new ParagraphComponent({
             slot
         });
     }
-    constructor(textbus, state = {
+    constructor(state = {
         slot: new Slot([
             ContentType.InlineComponent,
             ContentType.Text
         ])
     }) {
-        super(textbus, state);
+        super(state);
     }
     getSlots() {
         return [this.state.slot];
@@ -1666,7 +1667,7 @@ class ParagraphComponent extends Component {
             const isEmpty = this.state.slot.isEmpty;
             const afterSlot = ev.target.cut(ev.data.index);
             afterSlot.removeAttribute(headingAttr);
-            const nextParagraph = new ParagraphComponent(injector, {
+            const nextParagraph = new ParagraphComponent({
                 slot: afterSlot
             });
             if (isEmpty && (this.parentComponent instanceof BlockquoteComponent ||
@@ -1709,7 +1710,7 @@ const paragraphComponentLoader = {
         return returnableContentTypes.includes(ContentType.BlockComponent) &&
             (element.dataset.component === ParagraphComponent.componentName || /^P|H[1-6]$/.test(element.tagName));
     },
-    read(element, textbus, slotParser) {
+    read(element, _, slotParser) {
         let content;
         if (/^P|H[1-6]$/.test(element.tagName)) {
             content = element;
@@ -1727,7 +1728,7 @@ const paragraphComponentLoader = {
             ContentType.InlineComponent,
             ContentType.BlockComponent
         ]), content).toDelta();
-        const results = deltaToBlock(delta, textbus);
+        const results = deltaToBlock(delta);
         if (results.length === 1) {
             return results[0];
         }
@@ -1740,7 +1741,7 @@ const paragraphComponentLoader = {
         return containerSlot;
     }
 };
-function deltaToBlock(delta, textbus) {
+function deltaToBlock(delta) {
     const results = [];
     let slot = null;
     for (const item of delta) {
@@ -1753,7 +1754,7 @@ function deltaToBlock(delta, textbus) {
                 delta.attributes.forEach((value, key) => {
                     slot.setAttribute(key, value);
                 });
-                results.push(new ParagraphComponent(textbus, {
+                results.push(new ParagraphComponent({
                     slot
                 }));
             }
@@ -1918,7 +1919,7 @@ class SourceCodeComponent extends Component {
     }
     static fromJSON(textbus, json) {
         const registry = textbus.get(Registry);
-        return new SourceCodeComponent(textbus, {
+        return new SourceCodeComponent({
             slots: json.slots.map(item => {
                 return {
                     slot: registry.createSlot(item.slot),
@@ -1948,7 +1949,7 @@ class SourceCodeComponent extends Component {
                         ContentType.InlineComponent,
                         ContentType.Text
                     ]);
-                    const paragraph = new ParagraphComponent(textbus, {
+                    const paragraph = new ParagraphComponent({
                         slot
                     });
                     const index = parentSlot.indexOf(parentComponent);
@@ -2286,7 +2287,8 @@ function SourceCodeView(props) {
                                         }
                                     }
                                     return createVNode('div', {
-                                        class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : '')
+                                        class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : ''),
+                                        key: item.slot.id
                                     }, [
                                         createVNode('span', { class: 'xnote-source-code-line-content' }, children)
                                     ]);
@@ -2322,7 +2324,7 @@ const sourceCodeComponentLoader = {
             ((element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
                 element.tagName === 'PRE');
     },
-    read(el, textbus) {
+    read(el) {
         let slots = [];
         if (el.tagName === 'DIV') {
             const lines = el.querySelectorAll('.xnote-source-code-line');
@@ -2345,7 +2347,7 @@ const sourceCodeComponentLoader = {
                 return item;
             });
         }
-        return new SourceCodeComponent(textbus, {
+        return new SourceCodeComponent({
             lang: el.dataset.lang || '',
             theme: el.dataset.theme || '',
             lineNumber: el.dataset.lineNumber === 'true',
@@ -2440,7 +2442,7 @@ function registerTextIndentShortcut(textbus) {
 
 class ImageComponent extends Component {
     static fromJSON(textbus, json) {
-        return new ImageComponent(textbus, Object.assign({}, json));
+        return new ImageComponent(Object.assign({}, json));
     }
     getSlots() {
         return [];
@@ -2480,9 +2482,9 @@ const imageComponentLoader = {
     match(element) {
         return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
     },
-    read(element, textbus) {
+    read(element) {
         const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
-        return new ImageComponent(textbus, {
+        return new ImageComponent({
             src: img.src,
             width: img.style.width || 'auto',
             height: img.style.height || 'auto'
@@ -2491,8 +2493,8 @@ const imageComponentLoader = {
 };
 
 class VideoComponent extends Component {
-    static fromJSON(textbus, json) {
-        return new VideoComponent(textbus, Object.assign({}, json));
+    static fromJSON(_, json) {
+        return new VideoComponent(Object.assign({}, json));
     }
     getSlots() {
         return [];
@@ -2532,9 +2534,9 @@ const videoComponentLoader = {
     match(element) {
         return element.tagName === 'VIDEO' || element.dataset.component === VideoComponent.componentName;
     },
-    read(element, textbus) {
+    read(element) {
         const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
-        return new VideoComponent(textbus, {
+        return new VideoComponent({
             src: video.src,
             width: video.style.width || 'auto',
             height: video.style.height || 'auto'
@@ -2544,18 +2546,6 @@ const videoComponentLoader = {
 
 let ToolService = class ToolService {
     constructor(selection, controller) {
-        Object.defineProperty(this, "selection", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: selection
-        });
-        Object.defineProperty(this, "controller", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: controller
-        });
         Object.defineProperty(this, "state", {
             enumerable: true,
             configurable: true,
@@ -2568,12 +2558,11 @@ let ToolService = class ToolService {
             writable: true,
             value: void 0
         });
-        const [state, updateState] = useProduce({
+        this.state = createSignal({
             inSourceCode: false,
             readonly: controller.readonly,
             selectEmbed: false,
         });
-        this.state = state;
         this.sub = merge(selection.onChange, controller.onReadonlyStateChange).subscribe(() => {
             const { startSlot, endSlot, startOffset, endOffset } = selection;
             let is = false;
@@ -2583,10 +2572,10 @@ let ToolService = class ToolService {
                     is = true;
                 }
             }
-            updateState(draft => {
-                draft.selectEmbed = is;
-                draft.readonly = controller.readonly;
-                draft.inSourceCode = selection.commonAncestorComponent instanceof SourceCodeComponent;
+            this.state.set({
+                selectEmbed: is,
+                readonly: controller.readonly,
+                inSourceCode: selection.commonAncestorComponent instanceof SourceCodeComponent
             });
         });
     }
@@ -2610,7 +2599,7 @@ function AttrTool(props) {
     const selection = inject(Selection);
     const query = inject(Query);
     const refreshService = inject(RefreshService);
-    const [checkStates, setCheckStates] = useProduce({
+    const checkStates = reactive({
         textAlign: 'left',
         textIndent: 0
     });
@@ -2618,23 +2607,21 @@ function AttrTool(props) {
         if (!props.slot && !selection.isSelected) {
             return;
         }
-        setCheckStates(draft => {
-            const range = props.slot ? {
-                startSlot: props.slot,
-                endSlot: props.slot,
-                startOffset: 0,
-                endOffset: props.slot.length
-            } : {
-                startSlot: selection.startSlot,
-                startOffset: selection.startOffset,
-                endSlot: selection.endSlot,
-                endOffset: selection.endOffset
-            };
-            const textAlignState = query.queryAttributeByRange(textAlignAttr, range);
-            const textIndentState = query.queryAttributeByRange(textIndentAttr, range);
-            draft.textAlign = textAlignState.state === QueryStateType.Enabled ? textAlignState.value : 'left';
-            draft.textIndent = textIndentState.state === QueryStateType.Enabled ? textIndentState.value : 0;
-        });
+        const range = props.slot ? {
+            startSlot: props.slot,
+            endSlot: props.slot,
+            startOffset: 0,
+            endOffset: props.slot.length
+        } : {
+            startSlot: selection.startSlot,
+            startOffset: selection.startOffset,
+            endSlot: selection.endSlot,
+            endOffset: selection.endOffset
+        };
+        const textAlignState = query.queryAttributeByRange(textAlignAttr, range);
+        const textIndentState = query.queryAttributeByRange(textIndentAttr, range);
+        checkStates.textAlign = textAlignState.state === QueryStateType.Enabled ? textAlignState.value : 'left';
+        checkStates.textIndent = textIndentState.state === QueryStateType.Enabled ? textIndentState.value : 0;
     }
     updateCheckStates();
     const subscription = refreshService.onRefresh.subscribe(() => {
@@ -2683,20 +2670,19 @@ function AttrTool(props) {
     }
     const commonState = useCommonState();
     return withScopedCSS(scopedId$e, () => {
-        const states = checkStates();
         const b = commonState().inSourceCode || commonState().readonly;
         return (jsx(Dropdown, { disabled: b, width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsx(Keymap, { keymap: { key: 'L', modKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsx(Keymap, { keymap: { key: 'L', modKey: true } }), checked: checkStates.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
                     value: 't-l'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsx(Keymap, { keymap: { key: 'R', modKey: true } }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsx(Keymap, { keymap: { key: 'R', modKey: true } }), checked: checkStates.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
                     value: 't-r'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsx(Keymap, { keymap: { key: 'E', modKey: true } }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsx(Keymap, { keymap: { key: 'E', modKey: true } }), checked: checkStates.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
                     value: 't-c'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsx(Keymap, { keymap: { key: 'J', modKey: true } }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsx(Keymap, { keymap: { key: 'J', modKey: true } }), checked: checkStates.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
                     value: 't-j'
                 }, {
                     label: jsx(Divider, {}),
@@ -2708,7 +2694,7 @@ function AttrTool(props) {
                     label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: 'Tab', shiftKey: true } }), icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
                     value: 'i-'
                 }
-            ], children: props.children || jsx(Button, { disabled: b, arrow: true, highlight: false, children: jsx("span", { class: `xnote-icon-paragraph-${states.textAlign || 'left'} icon` }) }) }));
+            ], children: props.children || jsx(Button, { disabled: b, arrow: true, highlight: false, children: jsx("span", { class: `xnote-icon-paragraph-${checkStates.textAlign || 'left'} icon` }) }) }));
     });
 }
 
@@ -2823,7 +2809,7 @@ const defaultColumnWidth = 100;
 class TableComponent extends Component {
     static fromJSON(textbus, json) {
         const registry = textbus.get(Registry);
-        return new TableComponent(textbus, {
+        return new TableComponent({
             columnsConfig: json.columnsConfig || [],
             mergeConfig: json.mergeConfig || [],
             rows: json.rows.map(row => {
@@ -2839,14 +2825,14 @@ class TableComponent extends Component {
             })
         });
     }
-    constructor(textbus, state = {
+    constructor(state = {
         columnsConfig: Array.from({ length: 5 }).fill(defaultColumnWidth),
         mergeConfig: {},
         rows: Array.from({ length: 3 }).map(() => {
             return {
                 height: defaultRowHeight,
                 cells: Array.from({ length: 5 }).map(() => {
-                    const p = new ParagraphComponent(textbus);
+                    const p = new ParagraphComponent();
                     const slot = new Slot([ContentType.BlockComponent]);
                     slot.insert(p);
                     return {
@@ -2857,18 +2843,18 @@ class TableComponent extends Component {
             };
         })
     }) {
-        super(textbus, state);
+        super(state);
         Object.defineProperty(this, "selection", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: this.textbus.get(Selection)
+            value: void 0
         });
         Object.defineProperty(this, "commander", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: this.textbus.get(Commander)
+            value: void 0
         });
         Object.defineProperty(this, "focus", {
             enumerable: true,
@@ -3133,6 +3119,8 @@ class TableComponent extends Component {
     }
     setup() {
         const selection = useContext(Selection);
+        this.selection = selection;
+        this.commander = useContext(Commander);
         onFocusIn(() => {
             this.focus.next(true);
         });
@@ -3150,7 +3138,7 @@ class TableComponent extends Component {
                 this.tableSelection.set(null);
             }
         });
-        onDestroy(() => {
+        onDetach(() => {
             sub.unsubscribe();
         });
         onGetRanges(ev => {
@@ -3260,7 +3248,7 @@ class TableComponent extends Component {
             const slot = new Slot([
                 ContentType.BlockComponent,
             ]);
-            slot.insert(new ParagraphComponent(this.textbus, {
+            slot.insert(new ParagraphComponent({
                 slot: new Slot([
                     ContentType.InlineComponent,
                     ContentType.Text
@@ -3285,7 +3273,7 @@ class TableComponent extends Component {
                 const slot = new Slot([
                     ContentType.BlockComponent,
                 ]);
-                slot.insert(new ParagraphComponent(this.textbus, {
+                slot.insert(new ParagraphComponent({
                     slot: new Slot([
                         ContentType.InlineComponent,
                         ContentType.Text
@@ -3366,7 +3354,7 @@ const strikeThroughFormatLoader = {
 class TodolistComponent extends Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(Registry).createSlot(json.slot);
-        return new TodolistComponent(textbus, {
+        return new TodolistComponent({
             slot,
             checked: json.checked
         });
@@ -3375,7 +3363,6 @@ class TodolistComponent extends Component {
         return [this.state.slot];
     }
     setup() {
-        const textbus = useContext();
         const commander = useContext(Commander);
         const selection = useContext(Selection);
         onBreak(ev => {
@@ -3385,7 +3372,7 @@ class TodolistComponent extends Component {
                 const beforeIndex = this.parent.indexOf(this);
                 const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
                 if (beforeComponent instanceof TodolistComponent) {
-                    const nextComponent = new ParagraphComponent(textbus, {
+                    const nextComponent = new ParagraphComponent({
                         slot: new Slot([
                             ContentType.Text,
                             ContentType.InlineComponent
@@ -3399,7 +3386,7 @@ class TodolistComponent extends Component {
                     return;
                 }
             }
-            const nextParagraph = new TodolistComponent(textbus, {
+            const nextParagraph = new TodolistComponent({
                 checked: this.state.checked,
                 slot
             });
@@ -3416,7 +3403,7 @@ class TodolistComponent extends Component {
                     return false;
                 }
                 const slot = selection.commonAncestorSlot.cut();
-                const paragraph = new ParagraphComponent(textbus, {
+                const paragraph = new ParagraphComponent({
                     slot
                 });
                 commander.replaceComponent(this, paragraph);
@@ -3504,12 +3491,12 @@ const todolistComponentLoader = {
     match(element) {
         return element.dataset.component === TodolistComponent.componentName;
     },
-    read(element, injector, slotParser) {
+    read(element, _, slotParser) {
         const slot = slotParser(new Slot([
             ContentType.Text,
             ContentType.InlineComponent
         ]), element.children[1]);
-        return new TodolistComponent(injector, {
+        return new TodolistComponent({
             checked: element.children[0].hasAttribute('checked'),
             slot
         });
@@ -3528,7 +3515,7 @@ function toList(textbus, type) {
         },
         stateFactory(slots) {
             return slots.map((slot, index) => {
-                return new ListComponent(textbus, {
+                return new ListComponent({
                     type,
                     reorder: index === 0,
                     slot
@@ -3552,7 +3539,7 @@ function registerListShortcut(textbus) {
 }
 class ListComponent extends Component {
     static fromJSON(textbus, json) {
-        return new ListComponent(textbus, {
+        return new ListComponent({
             type: json.type,
             reorder: json.reorder,
             slot: textbus.get(Registry).createSlot(json.slot)
@@ -3562,7 +3549,6 @@ class ListComponent extends Component {
         return [this.state.slot];
     }
     setup() {
-        const textbus = useContext();
         const commander = useContext(Commander);
         const selection = useContext(Selection);
         const updateAfterList = (ref) => {
@@ -3592,7 +3578,7 @@ class ListComponent extends Component {
                 const beforeIndex = this.parent.indexOf(this);
                 const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
                 if (beforeComponent instanceof ListComponent) {
-                    const nextComponent = new ParagraphComponent(textbus, {
+                    const nextComponent = new ParagraphComponent({
                         slot: new Slot([
                             ContentType.Text,
                             ContentType.InlineComponent
@@ -3607,7 +3593,7 @@ class ListComponent extends Component {
                     return;
                 }
             }
-            const nextList = new ListComponent(textbus, {
+            const nextList = new ListComponent({
                 slot,
                 reorder: false,
                 type: this.state.type
@@ -3626,7 +3612,7 @@ class ListComponent extends Component {
                     return false;
                 }
                 const slot = selection.commonAncestorSlot.cut();
-                const paragraph = new ParagraphComponent(textbus, {
+                const paragraph = new ParagraphComponent({
                     slot
                 });
                 commander.replaceComponent(this, paragraph);
@@ -3802,7 +3788,7 @@ const listComponentLoader = {
                 ContentType.InlineComponent,
                 ContentType.Text
             ]), element.querySelector('.xnote-list-content') || document.createElement('div'));
-            return new ListComponent(textbus, {
+            return new ListComponent({
                 slot,
                 reorder: element.dataset.reorder !== 'false',
                 type
@@ -3816,7 +3802,7 @@ const listComponentLoader = {
                 ContentType.InlineComponent,
                 ContentType.Text
             ]), i);
-            const component = new ListComponent(textbus, {
+            const component = new ListComponent({
                 slot,
                 reorder: index === 0,
                 type
@@ -3831,7 +3817,7 @@ function useActiveBlock() {
     const query = inject(Query);
     const selection = inject(Selection);
     const refreshService = inject(RefreshService);
-    const [checkStates, setCheckStates] = useProduce({
+    const checkStates = reactive({
         paragraph: false,
         h1: false,
         h2: false,
@@ -3848,22 +3834,20 @@ function useActiveBlock() {
         highlightBox: false
     });
     function updateCheckStates(range) {
-        setCheckStates(draft => {
-            const heading = query.queryAttributeByRange(headingAttr, range);
-            draft.paragraph = query.queryComponentByRange(ParagraphComponent, range).state === QueryStateType.Enabled;
-            draft.h1 = draft.h2 = draft.h3 = draft.h4 = draft.h5 = draft.h6 = false;
-            if (heading.state === QueryStateType.Enabled) {
-                draft[heading.value] = true;
-                draft.paragraph = false;
-            }
-            const queryList = query.queryComponentByRange(ListComponent, range);
-            draft.unorderedList = queryList.state === QueryStateType.Enabled && queryList.value.state.type === 'UnorderedList';
-            draft.orderedList = queryList.state === QueryStateType.Enabled && queryList.value.state.type === 'OrderedList';
-            draft.table = query.queryComponentByRange(TableComponent, range).state === QueryStateType.Enabled;
-            draft.todolist = query.queryComponentByRange(TodolistComponent, range).state === QueryStateType.Enabled;
-            draft.blockquote = query.queryComponentByRange(BlockquoteComponent, range).state === QueryStateType.Enabled;
-            draft.sourceCode = query.queryComponentByRange(SourceCodeComponent, range).state === QueryStateType.Enabled;
-        });
+        const heading = query.queryAttributeByRange(headingAttr, range);
+        checkStates.paragraph = query.queryComponentByRange(ParagraphComponent, range).state === QueryStateType.Enabled;
+        checkStates.h1 = checkStates.h2 = checkStates.h3 = checkStates.h4 = checkStates.h5 = checkStates.h6 = false;
+        if (heading.state === QueryStateType.Enabled) {
+            checkStates[heading.value] = true;
+            checkStates.paragraph = false;
+        }
+        const queryList = query.queryComponentByRange(ListComponent, range);
+        checkStates.unorderedList = queryList.state === QueryStateType.Enabled && queryList.value.state.type === 'UnorderedList';
+        checkStates.orderedList = queryList.state === QueryStateType.Enabled && queryList.value.state.type === 'OrderedList';
+        checkStates.table = query.queryComponentByRange(TableComponent, range).state === QueryStateType.Enabled;
+        checkStates.todolist = query.queryComponentByRange(TodolistComponent, range).state === QueryStateType.Enabled;
+        checkStates.blockquote = query.queryComponentByRange(BlockquoteComponent, range).state === QueryStateType.Enabled;
+        checkStates.sourceCode = query.queryComponentByRange(SourceCodeComponent, range).state === QueryStateType.Enabled;
     }
     const subscription = refreshService.onRefresh.subscribe(() => {
         if (!selection.isSelected) {
@@ -3896,7 +3880,7 @@ function useActiveBlock() {
                 endOffset: selection.endOffset
             });
         }
-        return checkStates();
+        return checkStates;
     };
 }
 
@@ -3927,7 +3911,7 @@ function useBlockTransform() {
                         ]);
                     },
                     stateFactory(slots) {
-                        return slots.map(slot => new ParagraphComponent(textbus, {
+                        return slots.map(slot => new ParagraphComponent({
                             slot
                         }));
                     }
@@ -3935,7 +3919,7 @@ function useBlockTransform() {
                 break;
             case 'table':
                 {
-                    const table = new TableComponent(textbus);
+                    const table = new TableComponent();
                     if (((_a = selection.commonAncestorSlot) === null || _a === void 0 ? void 0 : _a.isEmpty) && ((_b = selection.commonAncestorComponent) === null || _b === void 0 ? void 0 : _b.name) === ParagraphComponent.componentName) {
                         commander.replaceComponent(selection.commonAncestorComponent, table);
                     }
@@ -3956,7 +3940,7 @@ function useBlockTransform() {
                     },
                     stateFactory(slots) {
                         return slots.map(slot => {
-                            return new TodolistComponent(textbus, {
+                            return new TodolistComponent({
                                 checked: false,
                                 slot
                             });
@@ -3985,7 +3969,7 @@ function useBlockTransform() {
                             },
                             stateFactory(slots) {
                                 return slots.map(slot => {
-                                    return new ParagraphComponent(textbus, {
+                                    return new ParagraphComponent({
                                         slot
                                     });
                                 });
@@ -4001,7 +3985,7 @@ function useBlockTransform() {
                                 ]);
                             },
                             stateFactory(slots) {
-                                return [new SourceCodeComponent(textbus, {
+                                return [new SourceCodeComponent({
                                         lang: '',
                                         lineNumber: true,
                                         autoBreak: true,
@@ -4033,7 +4017,7 @@ function useBlockTransform() {
                         });
                     }
                     else {
-                        const block = new HighlightBoxComponent(textbus);
+                        const block = new HighlightBoxComponent();
                         const slot = block.state.slot;
                         if (selection.startSlot === selection.endSlot) {
                             const parentComponent = selection.startSlot.parent;
@@ -4415,7 +4399,7 @@ function BoldTool() {
     const textbus = inject(Textbus);
     const refreshService = inject(RefreshService);
     const commonState = useCommonState();
-    const [viewModel, update] = useProduce({
+    const viewModel = reactive({
         highlight: false,
     });
     function toggle() {
@@ -4423,16 +4407,13 @@ function BoldTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(boldFormatter);
-        update(draft => {
-            draft.highlight = state.state === QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === QueryStateType.Enabled;
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-bold" }) });
+        return jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-bold" }) });
     };
 }
 
@@ -4454,7 +4435,7 @@ function CodeTool() {
     const refreshService = inject(RefreshService);
     const textbus = inject(Textbus);
     const commonState = useCommonState();
-    const [viewModel, update] = useProduce({
+    const viewModel = reactive({
         highlight: false,
     });
     function toggle() {
@@ -4462,16 +4443,13 @@ function CodeTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(codeFormatter);
-        update(draft => {
-            draft.highlight = state.state === QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === QueryStateType.Enabled;
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-code" }) });
+        return jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-code" }) });
     };
 }
 
@@ -4690,7 +4668,7 @@ class KatexEditor extends Textbus {
     }
     mount(host, code) {
         this.host = host;
-        const model = new SourceCodeComponent(this, {
+        const model = new SourceCodeComponent({
             lineNumber: true,
             autoBreak: true,
             lang: 'latex',
@@ -4719,15 +4697,15 @@ class KatexEditor extends Textbus {
 
 class KatexComponent extends Component {
     static fromJSON(textbus, state) {
-        return new KatexComponent(textbus, state);
+        return new KatexComponent(state);
     }
-    constructor(textbus, state = {
+    constructor(state = {
         text: '% \\f is defined as #1f(#2) using the macro\n' +
             '\\f\\relax{x} = \\int_{-\\infty}^\\infty\n' +
             '\\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n' +
             '\\,d\\xi'
     }) {
-        super(textbus, state);
+        super(state);
     }
     getSlots() {
         return [];
@@ -4815,9 +4793,9 @@ const katexComponentLoader = {
     match(element) {
         return element.dataset.component === KatexComponent.componentName;
     },
-    read(element, textbus) {
+    read(element) {
         const value = element.dataset.katex || '';
-        return new KatexComponent(textbus, {
+        return new KatexComponent({
             text: decodeURIComponent(value)
         });
     }
@@ -4861,7 +4839,7 @@ function InsertMenu(props) {
                     if (/h[1-6]/.test(type)) {
                         slot.setAttribute(headingAttr, type);
                     }
-                    const p = new ParagraphComponent(textbus, {
+                    const p = new ParagraphComponent({
                         slot
                     });
                     insertComponent(p);
@@ -4875,7 +4853,7 @@ function InsertMenu(props) {
                         ContentType.InlineComponent,
                         ContentType.Text
                     ]);
-                    const list = new ListComponent(textbus, {
+                    const list = new ListComponent({
                         slot,
                         reorder: true,
                         type: type === 'ol' ? 'OrderedList' : 'UnorderedList'
@@ -4889,7 +4867,7 @@ function InsertMenu(props) {
                     const slot = new Slot([
                         ContentType.Text
                     ]);
-                    const comp = new SourceCodeComponent(textbus, {
+                    const comp = new SourceCodeComponent({
                         lang: '',
                         lineNumber: true,
                         slots: [{
@@ -4903,7 +4881,7 @@ function InsertMenu(props) {
                 break;
             case 'table':
                 {
-                    const table = new TableComponent(textbus);
+                    const table = new TableComponent();
                     insertComponent(table);
                     textbus.nextTick(() => {
                         selection.selectFirstPosition(table, true, true);
@@ -4916,7 +4894,7 @@ function InsertMenu(props) {
                         ContentType.Text,
                         ContentType.InlineComponent
                     ]);
-                    const comp = new TodolistComponent(textbus, {
+                    const comp = new TodolistComponent({
                         slot,
                         checked: false
                     });
@@ -4927,7 +4905,7 @@ function InsertMenu(props) {
             case 'image':
                 if (fileUploader) {
                     Promise.resolve().then(() => fileUploader.uploadFile('image')).then(url => {
-                        const img = new ImageComponent(textbus, {
+                        const img = new ImageComponent({
                             src: url
                         });
                         commander.insert(img);
@@ -4937,7 +4915,7 @@ function InsertMenu(props) {
             case 'video':
                 if (fileUploader) {
                     Promise.resolve().then(() => fileUploader.uploadFile('video')).then(url => {
-                        const img = new VideoComponent(textbus, {
+                        const img = new VideoComponent({
                             src: url
                         });
                         commander.insert(img);
@@ -4946,8 +4924,8 @@ function InsertMenu(props) {
                 break;
             case 'highlightBox':
                 {
-                    const p = new ParagraphComponent(textbus);
-                    const comp = new HighlightBoxComponent(textbus);
+                    const p = new ParagraphComponent();
+                    const comp = new HighlightBoxComponent();
                     comp.state.slot.insert(p);
                     insertComponent(comp);
                     selection.setPosition(p.state.slot, 0);
@@ -4955,8 +4933,8 @@ function InsertMenu(props) {
                 break;
             case 'katex':
                 {
-                    const p = new ParagraphComponent(textbus);
-                    const comp = new KatexComponent(textbus);
+                    const p = new ParagraphComponent();
+                    const comp = new KatexComponent();
                     p.state.slot.insert(comp);
                     insertComponent(p);
                     selection.selectComponent(comp);
@@ -4964,17 +4942,17 @@ function InsertMenu(props) {
                 break;
             case 'step':
                 {
-                    const step = new StepComponent(textbus, {
+                    const step = new StepComponent({
                         step: 0,
-                        items: [createStepItem(textbus)]
+                        items: [createStepItem()]
                     });
                     insertComponent(step);
                     selection.selectFirstPosition(step, false, true);
                 }
                 break;
             case 'timeline': {
-                const timeline = new TimelineComponent(textbus, {
-                    items: [createTimelineItem(textbus, '#296eff')]
+                const timeline = new TimelineComponent({
+                    items: [createTimelineItem('#296eff')]
                 });
                 insertComponent(timeline);
                 selection.selectFirstPosition(timeline, false, true);
@@ -5007,7 +4985,7 @@ function ItalicTool() {
     const query = inject(Query);
     const refreshService = inject(RefreshService);
     const textbus = inject(Textbus);
-    const [viewModel, update] = useProduce({
+    const viewModel = reactive({
         highlight: false,
     });
     function toggle() {
@@ -5015,17 +4993,14 @@ function ItalicTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(italicFormatter);
-        update(draft => {
-            draft.highlight = state.state === QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === QueryStateType.Enabled;
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-italic" }) });
+        return jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-italic" }) });
     };
 }
 
@@ -5134,7 +5109,7 @@ function StrikeThroughTool() {
     const query = inject(Query);
     const refreshService = inject(RefreshService);
     const textbus = inject(Textbus);
-    const [viewModel, update] = useProduce({
+    const viewModel = reactive({
         highlight: false,
     });
     function toggle() {
@@ -5142,17 +5117,14 @@ function StrikeThroughTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(strikeThroughFormatter);
-        update(draft => {
-            draft.highlight = state.state === QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === QueryStateType.Enabled;
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-strikethrough" }) });
+        return jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-strikethrough" }) });
     };
 }
 
@@ -5160,13 +5132,11 @@ function SubscriptTool() {
     const query = inject(Query);
     const selection = inject(Selection);
     const commander = inject(Commander);
-    const [state, updateState] = useProduce({
+    const state = reactive({
         highlight: false
     });
     const sub = selection.onChange.subscribe(() => {
-        updateState(draft => {
-            draft.highlight = getState();
-        });
+        state.highlight = getState();
     });
     function getState() {
         const s = query.queryFormat(subscriptFormatter);
@@ -5187,7 +5157,7 @@ function SubscriptTool() {
     }
     const commonState = useCommonState();
     return () => {
-        return (jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, highlight: state().highlight, onClick: apply, children: jsx("span", { class: "xnote-icon-subscript" }) }));
+        return (jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, highlight: state.highlight, onClick: apply, children: jsx("span", { class: "xnote-icon-subscript" }) }));
     };
 }
 
@@ -5195,13 +5165,11 @@ function SuperscriptTool() {
     const query = inject(Query);
     const selection = inject(Selection);
     const commander = inject(Commander);
-    const [state, updateState] = useProduce({
+    const state = reactive({
         highlight: false
     });
     const sub = selection.onChange.subscribe(() => {
-        updateState(draft => {
-            draft.highlight = getState();
-        });
+        state.highlight = getState();
     });
     function getState() {
         const s = query.queryFormat(superscriptFormatter);
@@ -5222,7 +5190,7 @@ function SuperscriptTool() {
     }
     const commonState = useCommonState();
     return () => {
-        return (jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, highlight: state().highlight, onClick: apply, children: jsx("span", { class: "xnote-icon-superscript" }) }));
+        return (jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, highlight: state.highlight, onClick: apply, children: jsx("span", { class: "xnote-icon-superscript" }) }));
     };
 }
 
@@ -5324,7 +5292,7 @@ function UnderlineTool() {
     const query = inject(Query);
     const refreshService = inject(RefreshService);
     const textbus = inject(Textbus);
-    const [viewModel, update] = useProduce({
+    const viewModel = reactive({
         highlight: false,
     });
     function toggle() {
@@ -5332,17 +5300,14 @@ function UnderlineTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(underlineFormatter);
-        update(draft => {
-            draft.highlight = state.state === QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === QueryStateType.Enabled;
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-underline" }) });
+        return jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsx("span", { class: "xnote-icon-underline" }) });
     };
 }
 
@@ -5534,7 +5499,7 @@ const cellBackgroundAttrLoader = {
 function CellBackgroundTool() {
     const refreshService = inject(RefreshService);
     const selection = inject(Selection);
-    const [viewModel, update] = useProduce({
+    const viewModel = reactive({
         disabled: false,
     });
     function setColor(picker) {
@@ -5575,9 +5540,7 @@ function CellBackgroundTool() {
         }
     }
     const sub = refreshService.onRefresh.subscribe(() => {
-        update(draft => {
-            draft.disabled = !isInTable(selection);
-        });
+        viewModel.disabled = !isInTable(selection);
     });
     onUnmounted(() => {
         sub.unsubscribe();
@@ -5593,8 +5556,7 @@ function CellBackgroundTool() {
         '#c596e0',
     ];
     return () => {
-        const vm = viewModel();
-        const d = vm.disabled || commonState().readonly || commonState().inSourceCode;
+        const d = viewModel.disabled || commonState().readonly || commonState().inSourceCode;
         return (jsx(Dropdown, { width: '177px', disabled: d, menu: jsx(ColorPicker, { recentColors: defaultColors, onSelected: setColor }), trigger: 'hover', children: jsx(Button, { disabled: d, arrow: true, children: jsx("span", { class: "xnote-icon-palette" }) }) }));
     };
 }
@@ -5602,7 +5564,7 @@ function CellBackgroundTool() {
 function MergeCellsTool() {
     const refreshService = inject(RefreshService);
     const selection = inject(Selection);
-    const [viewModel, update] = useProduce({
+    const viewModel = reactive({
         highlight: false,
         disabled: false,
     });
@@ -5613,33 +5575,30 @@ function MergeCellsTool() {
         }
     }
     const sub = refreshService.onRefresh.subscribe(() => {
-        update(draft => {
-            const is = isInTable(selection);
-            if (is) {
-                const p1 = getTableSlotBySlot(selection.startSlot);
-                const p2 = getTableSlotBySlot(selection.endSlot);
-                if (p1 && p2) {
-                    draft.disabled = p1 === p2;
-                    return;
-                }
+        const is = isInTable(selection);
+        if (is) {
+            const p1 = getTableSlotBySlot(selection.startSlot);
+            const p2 = getTableSlotBySlot(selection.endSlot);
+            if (p1 && p2) {
+                viewModel.disabled = p1 === p2;
+                return;
             }
-            draft.disabled = true;
-        });
+        }
+        viewModel.disabled = true;
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled || commonState().readonly || commonState().inSourceCode, onClick: merge, children: jsx("span", { class: "xnote-icon-merge-cells" }) });
+        return jsx(Button, { highlight: viewModel.highlight, disabled: viewModel.disabled || commonState().readonly || commonState().inSourceCode, onClick: merge, children: jsx("span", { class: "xnote-icon-merge-cells" }) });
     };
 }
 
 function SplitCellsTool() {
     const refreshService = inject(RefreshService);
     const selection = inject(Selection);
-    const [viewModel, update] = useProduce({
+    const viewModel = reactive({
         highlight: false,
         disabled: false,
     });
@@ -5664,47 +5623,44 @@ function SplitCellsTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const commonAncestorComponent = selection.commonAncestorComponent;
-        update(draft => {
-            if (commonAncestorComponent instanceof TableComponent) {
-                const slots = commonAncestorComponent.getSelectedNormalizedSlots();
-                if (slots) {
-                    for (const item of slots) {
-                        for (const cell of item.cells) {
-                            if (cell.visible && cell.colspan > 1 || cell.colspan > 1) {
-                                draft.disabled = false;
-                                return;
-                            }
+        if (commonAncestorComponent instanceof TableComponent) {
+            const slots = commonAncestorComponent.getSelectedNormalizedSlots();
+            if (slots) {
+                for (const item of slots) {
+                    for (const cell of item.cells) {
+                        if (cell.visible && cell.colspan > 1 || cell.colspan > 1) {
+                            viewModel.disabled = false;
+                            return;
                         }
                     }
                 }
             }
-            else {
-                let parentSlot = selection.commonAncestorSlot;
-                while (parentSlot) {
-                    if (parentSlot.parent instanceof TableComponent) {
-                        const slots = parentSlot.parent.getNormalizedData();
-                        for (const item of slots) {
-                            for (const cell of item.cells) {
-                                if (cell.raw.slot === parentSlot) {
-                                    draft.disabled = !(cell.colspan > 1 || cell.colspan > 1);
-                                    return;
-                                }
+        }
+        else {
+            let parentSlot = selection.commonAncestorSlot;
+            while (parentSlot) {
+                if (parentSlot.parent instanceof TableComponent) {
+                    const slots = parentSlot.parent.getNormalizedData();
+                    for (const item of slots) {
+                        for (const cell of item.cells) {
+                            if (cell.raw.slot === parentSlot) {
+                                viewModel.disabled = !(cell.colspan > 1 || cell.colspan > 1);
+                                return;
                             }
                         }
                     }
-                    parentSlot = parentSlot.parentSlot;
                 }
+                parentSlot = parentSlot.parentSlot;
             }
-            draft.disabled = true;
-        });
+        }
+        viewModel.disabled = true;
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled || commonState().readonly || commonState().inSourceCode, onClick: split, children: jsx("span", { class: "xnote-icon-split-cells" }) });
+        return jsx(Button, { highlight: viewModel.highlight, disabled: viewModel.disabled || commonState().readonly || commonState().inSourceCode, onClick: split, children: jsx("span", { class: "xnote-icon-split-cells" }) });
     };
 }
 
@@ -5740,15 +5696,13 @@ const LeftToolbar = withAnnotation({
             refreshService.onRefresh.next();
         }
     }
-    const [positionSignal, updatePosition] = useProduce({
+    const positionSignal = reactive({
         left: 0,
         top: 0,
         display: false
     });
     const sub = editorService.onLeftToolbarCanVisibleChange.subscribe(() => {
-        updatePosition(d => {
-            d.display = editorService.canShowLeftToolbar;
-        });
+        positionSignal.display = editorService.canShowLeftToolbar;
     });
     onUnmounted(() => {
         sub.unsubscribe();
@@ -5786,18 +5740,14 @@ const LeftToolbar = withAnnotation({
                     slot.parent instanceof SourceCodeComponent ||
                     slot.parent instanceof TableComponent);
                 const nativeNode = adapter.getNativeNodeByComponent(slot.parent);
-                updatePosition(draft => {
-                    const containerRect = docContentContainer.getBoundingClientRect();
-                    const currentRect = nativeNode.getBoundingClientRect();
-                    draft.display = true;
-                    draft.left = currentRect.left - containerRect.left;
-                    draft.top = currentRect.top - containerRect.top + docContentContainer.offsetTop;
-                });
+                const containerRect = docContentContainer.getBoundingClientRect();
+                const currentRect = nativeNode.getBoundingClientRect();
+                positionSignal.display = true;
+                positionSignal.left = currentRect.left - containerRect.left;
+                positionSignal.top = currentRect.top - containerRect.top + docContentContainer.offsetTop;
             }
             else {
-                updatePosition(draft => {
-                    draft.display = false;
-                });
+                positionSignal.display = false;
                 isEmptyBlock.set(false);
             }
         });
@@ -5876,7 +5826,6 @@ const LeftToolbar = withAnnotation({
     }
     return withScopedCSS(scopedId$a, () => {
         var _a;
-        const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsx("span", { class: "xnote-icon-pilcrow" });
         const states = checkStates(slot);
@@ -5906,9 +5855,9 @@ const LeftToolbar = withAnnotation({
         const activeParentComponent = (_a = activeSlot()) === null || _a === void 0 ? void 0 : _a.parent;
         const needInsert = activeParentComponent instanceof TableComponent || activeParentComponent instanceof SourceCodeComponent;
         return (jsx("div", { class: "left-toolbar", ref: toolbarRef, children: jsx("div", { class: "left-toolbar-btn-wrap", ref: btnRef, style: {
-                    left: position.left + 'px',
-                    top: position.top + 'px',
-                    display: position.display && editorService.canShowLeftToolbar ? 'block' : 'none'
+                    left: positionSignal.left + 'px',
+                    top: positionSignal.top + 'px',
+                    display: positionSignal.display && editorService.canShowLeftToolbar ? 'block' : 'none'
                 }, children: jsx(Dropdown, { toLeft: true, onExpendStateChange: changeIgnoreMove, abreast: true, style: {
                         position: 'absolute',
                         right: 0,
@@ -6036,14 +5985,14 @@ const InlineToolbar = withAnnotation({
     const subscription = merge(textbus.onChange, selection.onChange).pipe(debounceTime(20), tap(() => {
         refreshService.onRefresh.next();
     }), delay(200)).subscribe(() => {
-        if (viewPosition().isHide) {
+        if (viewPosition.isHide) {
             editorService.changeLeftToolbarVisible(true);
         }
     });
     onUnmounted(() => {
         subscription.unsubscribe();
     });
-    const [viewPosition, updateViewPosition] = useProduce({
+    const viewPosition = reactive({
         left: 0,
         top: 0,
         isHide: true,
@@ -6121,21 +6070,17 @@ const InlineToolbar = withAnnotation({
         const top = toBottom ?
             selectionFocusRect.top + selectionFocusRect.height - docRect.top + 10 :
             selectionFocusRect.top - docRect.top - toolbarHeight - 10;
-        updateViewPosition(draft => {
-            draft.transitionDuration = .15;
-            draft.left = centerLeft - docRect.left;
-            // draft.left = Math.max(centerLeft - docRect.left, toolbarRect.width / 2 + 10 - docRect.left)
-            draft.top = top + 10;
-        });
+        viewPosition.transitionDuration = .15;
+        viewPosition.left = centerLeft - docRect.left;
+        // draft.left = Math.max(centerLeft - docRect.left, toolbarRect.width / 2 + 10 - docRect.left)
+        viewPosition.top = top + 10;
         return top;
     }
     const sub = textbus.onChange.pipe(debounceTime(100)).subscribe(() => {
-        if (!viewPosition().isHide) {
+        if (!viewPosition.isHide) {
             const top = getTop();
             if (top !== null && !selection.isCollapsed) {
-                updateViewPosition(draft => {
-                    draft.top = top;
-                });
+                viewPosition.top = top;
                 return;
             }
         }
@@ -6158,11 +6103,9 @@ const InlineToolbar = withAnnotation({
             return !selection.isCollapsed && !(selection.commonAncestorComponent instanceof SourceCodeComponent);
         }), map(getTop), delay(200)).subscribe((top) => {
             if (top !== null) {
-                updateViewPosition(draft => {
-                    draft.isHide = false;
-                    draft.opacity = 1;
-                    draft.top = top;
-                });
+                viewPosition.isHide = false;
+                viewPosition.opacity = 1;
+                viewPosition.top = top;
                 editorService.changeLeftToolbarVisible(false);
             }
             else {
@@ -6175,11 +6118,9 @@ const InlineToolbar = withAnnotation({
             return;
         }
         mouseupSubscription.unsubscribe();
-        updateViewPosition(draft => {
-            draft.opacity = 0;
-            draft.isHide = true;
-            draft.transitionDuration = 0;
-        });
+        viewPosition.opacity = 0;
+        viewPosition.isHide = true;
+        viewPosition.transitionDuration = 0;
         bindMouseup();
     });
     const instance = getCurrentInstance();
@@ -6192,14 +6133,13 @@ const InlineToolbar = withAnnotation({
         mouseupSubscription.unsubscribe();
     });
     return withScopedCSS(scopedId$8, () => {
-        const p = viewPosition();
         return (jsxs("div", { class: ['toolbar', props.theme], ref: toolbarRef, style: {
-                left: p.left + 'px',
-                top: p.top + 'px',
-                pointerEvents: p.isHide ? 'none' : 'initial',
-                opacity: p.opacity,
+                left: viewPosition.left + 'px',
+                top: viewPosition.top + 'px',
+                pointerEvents: viewPosition.isHide ? 'none' : 'initial',
+                opacity: viewPosition.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
-                transitionDuration: p.transitionDuration + 's'
+                transitionDuration: viewPosition.transitionDuration + 's'
             }, children: [jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(TextColorTool, {}) }), jsx(ToolbarItem, { children: jsx(TextBackgroundColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
@@ -6287,10 +6227,11 @@ class StaticToolbarPlugin {
         const container = document.createElement('div');
         container.style.position = 'relative';
         container.style.borderRadius = 'inherit';
-        this.app = createApp(jsx(Context, { providers: [{
-                    provide: DropdownMenuContainer,
-                    useValue: container
-                }], children: jsx(StaticToolbar, { theme: this.options.theme }) }), {
+        const Context = createContext([{
+                provide: DropdownMenuContainer,
+                useValue: container
+            }]);
+        this.app = createApp(jsx(Context, { children: jsx(StaticToolbar, { theme: this.options.theme }) }), {
             context: injector
         });
         this.options.host.appendChild(container);
@@ -6322,39 +6263,30 @@ const SuspensionToolbar = withAnnotation({
     onUnmounted(() => {
         subscription.unsubscribe();
     });
-    const [styles, updateStyles] = useProduce({
+    const styles = reactive({
         top: 0,
         opacity: 1,
     });
     subscription.add(fromEvent(document, 'scroll').pipe(tap(() => {
-        updateStyles(draft => {
-            draft.opacity = 0;
-        });
+        styles.opacity = 0;
     }), debounceTime(100), tap(() => {
         const rect = viewDocument.getBoundingClientRect();
         if (rect.top < 10) {
-            updateStyles(draft => {
-                draft.top = Math.min(-rect.top + 10, rect.height - 100);
-            });
+            styles.top = Math.min(-rect.top + 10, rect.height - 100);
         }
         else {
-            updateStyles(draft => {
-                draft.top = 0;
-            });
+            styles.top = 0;
         }
     }), delay(100)).subscribe(() => {
-        updateStyles(draft => {
-            draft.opacity = 1;
-        });
+        styles.opacity = 1;
     }));
     return withScopedCSS(scopedId$6, () => {
-        const s = styles();
         return (jsxs("div", { class: ['toolbar', props.theme, {
-                    suspension: s.top === 0 ? '' : 'suspension'
+                    suspension: styles.top === 0 ? '' : 'suspension'
                 }], style: {
-                top: s.top + 'px',
-                opacity: s.opacity,
-                pointerEvents: s.opacity === 0 ? 'none' : 'initial',
+                top: styles.top + 'px',
+                opacity: styles.opacity,
+                pointerEvents: styles.opacity === 0 ? 'none' : 'initial',
             }, children: [jsx(ToolbarItem, { children: jsx(UndoTool, {}) }), jsx(ToolbarItem, { children: jsx(RedoTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(InsertTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, {}) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(TextColorTool, {}) }), jsx(ToolbarItem, { children: jsx(TextBackgroundColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
@@ -6537,7 +6469,7 @@ function registerAtShortcut(textbus) {
             if (commonAncestorComponent instanceof SourceCodeComponent) {
                 return false;
             }
-            const at = new AtComponent(textbus);
+            const at = new AtComponent();
             commander.insert(at);
             selection.setPosition(at.state.slot, 0);
         }
@@ -6548,21 +6480,21 @@ class AtComponent extends Component {
         const registry = textbus.get(Registry);
         if (slotState) {
             const slot = registry.createSlot(slotState);
-            return new AtComponent(textbus, {
+            return new AtComponent({
                 slot
             });
         }
-        return new AtComponent(textbus, {
+        return new AtComponent({
             userInfo,
         });
     }
-    constructor(textbus, state = {
+    constructor(state = {
         slot: new Slot([ContentType.Text])
     }) {
         if (!state.userInfo && !state.slot) {
             state.slot = new Slot([ContentType.Text]);
         }
-        super(textbus, state);
+        super(state);
         Object.defineProperty(this, "focus", {
             enumerable: true,
             configurable: true,
@@ -6585,13 +6517,13 @@ class AtComponent extends Component {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: this.textbus.get(Selection)
+            value: void 0
         });
         Object.defineProperty(this, "organization", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: this.textbus.get(Organization)
+            value: void 0
         });
     }
     getSlots() {
@@ -6604,6 +6536,8 @@ class AtComponent extends Component {
         return [];
     }
     setup() {
+        this.selection = useContext(Selection);
+        this.organization = useContext(Organization);
         let isFocus = false;
         onFocus(() => {
             isFocus = true;
@@ -6678,7 +6612,7 @@ class AtComponent extends Component {
                 this.focus.next(true);
             }
         });
-        onDestroy(() => {
+        onDetach(() => {
             subs.unsubscribe();
         });
     }
@@ -6768,12 +6702,12 @@ const atComponentLoader = {
     read(element, textbus, slotParser) {
         const data = element.dataset.info;
         if (data) {
-            return new AtComponent(textbus, {
+            return new AtComponent({
                 userInfo: JSON.parse(decodeURIComponent(data))
             });
         }
         const slot = slotParser(new Slot([ContentType.Text]), element.querySelector('.xnote-at-input') || document.createElement('div'));
-        return new AtComponent(textbus, {
+        return new AtComponent({
             slot
         });
     }
@@ -6791,7 +6725,7 @@ class RootComponent extends Component {
     }
     static fromJSON(textbus, json) {
         const content = textbus.get(Registry).createSlot(json.content);
-        return new RootComponent(textbus, {
+        return new RootComponent({
             content
         });
     }
@@ -6820,7 +6754,7 @@ class RootComponent extends Component {
         }
         const selection = this.textbus.get(Selection);
         content.retain(content.length);
-        const newParagraph = new ParagraphComponent(this.textbus);
+        const newParagraph = new ParagraphComponent();
         content.insert(newParagraph);
         selection.setPosition(newParagraph.state.slot, 0);
     }
@@ -6869,7 +6803,7 @@ const rootComponentLoader = {
     match() {
         return true;
     },
-    read(element, textbus, slotParser) {
+    read(element, _, slotParser) {
         const delta = slotParser(new Slot([
             ContentType.BlockComponent,
             ContentType.InlineComponent,
@@ -6878,7 +6812,7 @@ const rootComponentLoader = {
         const slot = new Slot([
             ContentType.BlockComponent
         ]);
-        deltaToBlock(delta, textbus).forEach(i => {
+        deltaToBlock(delta).forEach(i => {
             slot.insert(i);
         });
         return slot;
@@ -7124,7 +7058,7 @@ function Scroll(props) {
     const scrollRef = createRef();
     const input = inject(Input);
     const tableService = inject(TableService);
-    const [showShadow, updateShowShadow] = useProduce({
+    const showShadow = reactive({
         leftEnd: false,
         rightEnd: false
     });
@@ -7134,10 +7068,8 @@ function Scroll(props) {
             if (props.isFocus()) {
                 input.caret.refresh();
             }
-            updateShowShadow(draft => {
-                draft.leftEnd = el.scrollLeft === 0;
-                draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
-            });
+            showShadow.leftEnd = el.scrollLeft === 0;
+            showShadow.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
         }
         update();
         const s = fromEvent(el, 'scroll').subscribe(update);
@@ -7145,15 +7077,13 @@ function Scroll(props) {
     });
     onUpdated(() => {
         const el = scrollRef.current;
-        updateShowShadow(draft => {
-            draft.leftEnd = el.scrollLeft === 0;
-            draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
-        });
+        showShadow.leftEnd = el.scrollLeft === 0;
+        showShadow.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
     });
     return withScopedCSS(scopedId$3, () => {
         return jsx("div", { ref: [scrollRef], class: ['scroll-container', {
-                    'left-end': showShadow().leftEnd,
-                    'right-end': showShadow().rightEnd,
+                    'left-end': showShadow.leftEnd,
+                    'right-end': showShadow.rightEnd,
                     'active': props.isFocus(),
                     // 'hide-selection': isSelectColumn()
                 }], onScroll: ev => {
@@ -7296,34 +7226,30 @@ var scopedId$1 = "vf-d4c4a9";
 function ResizeRow(props) {
     const dragLineRef = createRef();
     const tableService = inject(TableService);
-    const [styles, updateStyles] = useProduce({
+    const styles = reactive({
         visible: false,
         top: 0
     });
     onMounted(() => {
         const sub = tableService.onInsertRowBefore.subscribe(i => {
             if (i === null) {
-                updateStyles(draft => {
-                    draft.visible = false;
-                });
+                styles.visible = false;
                 return;
             }
-            updateStyles(draft => {
-                draft.visible = true;
-                if (i === -1) {
-                    draft.top = 0;
-                    return;
-                }
-                const row = props.tableRef.current.rows.item(i);
-                draft.top = row.offsetTop + row.offsetHeight;
-            });
+            styles.visible = true;
+            if (i === -1) {
+                styles.top = 0;
+                return;
+            }
+            const row = props.tableRef.current.rows.item(i);
+            styles.top = row.offsetTop + row.offsetHeight;
         });
         return () => sub.unsubscribe();
     });
     return withScopedCSS(scopedId$1, () => {
         return jsx("div", { ref: dragLineRef, style: {
-                display: styles().visible ? 'block' : 'none',
-                top: styles().top + 'px',
+                display: styles.visible ? 'block' : 'none',
+                top: styles.top + 'px',
                 width: sum(props.component.state.columnsConfig) + 'px'
             }, class: 'drag-line' });
     });
@@ -7332,7 +7258,7 @@ function ResizeRow(props) {
 var scopedId = "vf-4a5ad1";
 
 function SelectionMask(props) {
-    const [styles, updateStyles] = useProduce({
+    const styles = reactive({
         visible: false,
         left: 0,
         top: 0,
@@ -7346,6 +7272,7 @@ function SelectionMask(props) {
     });
     watch(props.component.tableSelection, update);
     function update() {
+        var _a;
         const selection = props.component.tableSelection();
         const state = props.component.state;
         if (isShowMask(props.component)) {
@@ -7362,21 +7289,16 @@ function SelectionMask(props) {
                 heightCompensation += 0.5;
             }
             const trs = Array.from(props.tableRef.current.rows);
-            updateStyles(draft => {
-                var _a;
-                const height = trs[selection.endRow - 1].offsetHeight ||
-                    ((_a = trs[selection.endRow - 1].children[0]) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
-                draft.visible = true;
-                draft.left = sum(state.columnsConfig.slice(0, selection.startColumn));
-                draft.top = trs[selection.startRow].offsetTop + topCompensation;
-                draft.width = sum(state.columnsConfig.slice(selection.startColumn, selection.endColumn)) - 1 + 'px';
-                draft.height = trs[selection.endRow - 1].offsetTop + height + heightCompensation - draft.top + 'px';
-            });
+            const height = trs[selection.endRow - 1].offsetHeight ||
+                ((_a = trs[selection.endRow - 1].children[0]) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+            styles.visible = true;
+            styles.left = sum(state.columnsConfig.slice(0, selection.startColumn));
+            styles.top = trs[selection.startRow].offsetTop + topCompensation;
+            styles.width = sum(state.columnsConfig.slice(selection.startColumn, selection.endColumn)) - 1 + 'px';
+            styles.height = trs[selection.endRow - 1].offsetTop + height + heightCompensation - styles.top + 'px';
         }
         else {
-            updateStyles(draft => {
-                draft.visible = false;
-            });
+            styles.visible = false;
         }
     }
     const s = props.component.changeMarker.onChange.pipe(debounceTime(30)).subscribe(() => {
@@ -7386,15 +7308,14 @@ function SelectionMask(props) {
         s.unsubscribe();
     });
     return withScopedCSS(scopedId, () => {
-        const style = styles();
         return (jsx("div", { class: "mask", style: {
-                display: style.visible ? 'block' : 'none',
-                left: style.left + 'px',
-                top: style.top + 'px',
-                right: style.right + 'px',
-                width: style.width,
-                height: style.height,
-                bottom: style.bottom + 'px'
+                display: styles.visible ? 'block' : 'none',
+                left: styles.left + 'px',
+                top: styles.top + 'px',
+                right: styles.right + 'px',
+                width: styles.width,
+                height: styles.height,
+                bottom: styles.bottom + 'px'
             } }));
     });
 }
@@ -7609,7 +7530,7 @@ const tableComponentLoader = {
                         ContentType.InlineComponent,
                         ContentType.Text
                     ]), cell).toDelta();
-                    const results = deltaToBlock(delta, textbus);
+                    const results = deltaToBlock(delta);
                     delta.attributes.forEach((value, key) => {
                         slot.setAttribute(key, value);
                     });
@@ -7640,7 +7561,7 @@ const tableComponentLoader = {
                         ContentType.InlineComponent,
                         ContentType.Text
                     ]), cell).toDelta();
-                    const results = deltaToBlock(delta, textbus);
+                    const results = deltaToBlock(delta);
                     delta.attributes.forEach((value, key) => {
                         slot.setAttribute(key, value);
                     });
@@ -7667,7 +7588,7 @@ const tableComponentLoader = {
             layoutWidth[i] = layoutWidth[i] || 100;
         }
         layoutWidth.length = length;
-        return new TableComponent(textbus, {
+        return new TableComponent({
             columnsConfig: layoutWidth,
             mergeConfig: cells.mergedConfig,
             rows: cells.table.map(i => {
@@ -7756,7 +7677,6 @@ TableSelectionAwarenessDelegate = __decorate([
 
 function TimelineComponentView(props) {
     const adapter = inject(DomAdapter);
-    const textbus = inject(Textbus);
     const isOutput = useOutput();
     const isReadonly = useReadonly();
     return () => {
@@ -7769,7 +7689,7 @@ function TimelineComponentView(props) {
                                 backgroundColor: item.theme,
                             } }), !isOutput() && !isReadonly() && jsxs("div", { class: "xnote-timeline-tools", children: [jsx(Button, { class: "xnote-timeline-add xnote-icon-plus", onClick: () => {
                                         const index = component.state.items.indexOf(item) + 1;
-                                        component.state.items.splice(index, 0, createTimelineItem(textbus, item.theme));
+                                        component.state.items.splice(index, 0, createTimelineItem(item.theme));
                                     } }), jsx(Button, { class: "xnote-timeline-add xnote-icon-bin", onClick: () => {
                                         const index = component.state.items.indexOf(item);
                                         component.state.items.splice(index, 1);
@@ -7785,8 +7705,8 @@ const timelineComponentLoader = {
     match(element) {
         return element.className === 'xnote-timeline';
     },
-    read(element, context, slotParser) {
-        return new TimelineComponent(context, {
+    read(element, _, slotParser) {
+        return new TimelineComponent({
             items: Array.from(element.children).map(child => {
                 const slot = new Slot([
                     ContentType.BlockComponent
@@ -7802,7 +7722,6 @@ const timelineComponentLoader = {
 
 function StepComponentView(props) {
     const adapter = inject(DomAdapter);
-    const textbus = inject(Textbus);
     const isOutput = useOutput();
     const isReadonly = useReadonly();
     return () => {
@@ -7828,7 +7747,7 @@ function StepComponentView(props) {
                                         }
                                     }, children: index + 1 })] }), !isOutput() && !isReadonly() && jsxs("div", { class: "xnote-step-tools", children: [jsx(Button, { class: "xnote-step-add xnote-icon-plus", onClick: () => {
                                         const index = component.state.items.indexOf(item) + 1;
-                                        component.state.items.splice(index, 0, createStepItem(textbus));
+                                        component.state.items.splice(index, 0, createStepItem());
                                     } }), jsx(Button, { class: "xnote-step-add xnote-icon-bin", onClick: () => {
                                         const index = component.state.items.indexOf(item);
                                         component.state.items.splice(index, 1);
@@ -7844,8 +7763,8 @@ const stepComponentLoader = {
     match(element) {
         return element.dataset.component === StepComponent.componentName;
     },
-    read(element, context, slotParser) {
-        return new StepComponent(context, {
+    read(element, _, slotParser) {
+        return new StepComponent({
             step: Number(element.dataset.step) || 0,
             items: Array.from(element.children).map(child => {
                 const slot = new Slot([
@@ -8127,7 +8046,7 @@ class Editor extends Textbus {
             rootComp = this.createModel(config.content);
         }
         else {
-            rootComp = new RootComponent(this, {
+            rootComp = new RootComponent({
                 content: new Slot([ContentType.BlockComponent])
             });
         }
@@ -8163,11 +8082,11 @@ class Editor extends Textbus {
             ContentType.BlockComponent
         ]);
         if (doc instanceof Slot) {
-            deltaToBlock(doc.toDelta(), this).forEach(i => {
+            deltaToBlock(doc.toDelta()).forEach(i => {
                 content.insert(i);
             });
         }
-        return new RootComponent(this, {
+        return new RootComponent({
             content
         });
     }