@textbus/xnote 0.3.4 → 0.3.6

package/bundles/index.js

@@ -7,7 +7,6 @@ var core$1 = require('@textbus/core');
 var color = require('@tanbo/color');
 var platformBrowser = require('@textbus/platform-browser');
 var platformBrowser$1 = require('@viewfly/platform-browser');
-var hooks = require('@viewfly/hooks');
 var highlightjs = require('highlight.js');
 var uuid = require('uuid');
 var Katex = require('katex');
@@ -1166,7 +1165,7 @@ function useBlockContent(slot) {
     const selection = textbus.get(core$1.Selection);
     core$1.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();
@@ -1175,7 +1174,7 @@ function useBlockContent(slot) {
     core$1.onContentInsert(ev => {
         if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
             (typeof ev.data.content === 'string' || ev.data.content.type !== core$1.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);
@@ -1197,10 +1196,12 @@ function SlotRender(props) {
         });
     }
     let sub = listen(slot);
-    core.onPropsChanged((currentProps, oldProps) => {
-        if (oldProps.slot !== currentProps.slot) {
+    core.watch(() => {
+        return props.slot;
+    }, (currentSlot, oldSlot) => {
+        if (oldSlot !== currentSlot) {
             sub.unsubscribe();
-            sub = listen(currentProps.slot);
+            sub = listen(currentSlot);
         }
     });
     core.onUnmounted(() => {
@@ -1217,16 +1218,16 @@ function SlotRender(props) {
 class BlockquoteComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(core$1.Registry).createSlot(json.slot);
-        return new BlockquoteComponent(textbus, {
+        return new BlockquoteComponent({
             slot
         });
     }
-    constructor(textbus, state = {
+    constructor(state = {
         slot: new core$1.Slot([
             core$1.ContentType.BlockComponent
         ])
     }) {
-        super(textbus, state);
+        super(state);
     }
     getSlots() {
         return [this.state.slot];
@@ -1291,7 +1292,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;
@@ -1336,7 +1337,7 @@ const blockquoteComponentLoader = {
     match(element, returnableContentTypes) {
         return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && element.tagName === 'BLOCKQUOTE';
     },
-    read(element, textbus, slotParser) {
+    read(element, _, slotParser) {
         const delta = slotParser(new core$1.Slot([
             core$1.ContentType.BlockComponent,
             core$1.ContentType.InlineComponent,
@@ -1345,10 +1346,10 @@ const blockquoteComponentLoader = {
         const slot = new core$1.Slot([
             core$1.ContentType.BlockComponent,
         ]);
-        deltaToBlock(delta, textbus).forEach(i => {
+        deltaToBlock(delta).forEach(i => {
             slot.insert(i);
         });
-        return new BlockquoteComponent(textbus, {
+        return new BlockquoteComponent({
             slot
         });
     },
@@ -1356,18 +1357,18 @@ const blockquoteComponentLoader = {
 
 class HighlightBoxComponent extends core$1.Component {
     static fromJSON(textbus, json) {
-        return new HighlightBoxComponent(textbus, {
+        return new HighlightBoxComponent({
             type: json.type,
             slot: textbus.get(core$1.Registry).createSlot(json.slot)
         });
     }
-    constructor(textbus, state = {
+    constructor(state = {
         type: '',
         slot: new core$1.Slot([
             core$1.ContentType.BlockComponent,
         ])
     }) {
-        super(textbus, state);
+        super(state);
     }
     getSlots() {
         return [this.state.slot];
@@ -1433,10 +1434,10 @@ const highlightBoxComponentLoader = {
         const slot = new core$1.Slot([
             core$1.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
         });
@@ -1531,11 +1532,11 @@ const colorFormatLoader = {
     }
 };
 
-function createTimelineItem(textbus, theme) {
+function createTimelineItem(theme) {
     const slot = new core$1.Slot([
         core$1.ContentType.BlockComponent,
     ]);
-    const title = new ParagraphComponent(textbus);
+    const title = new ParagraphComponent();
     title.state.slot.insert('时间主题', [
         [fontSizeFormatter, '18px'],
         [boldFormatter, true]
@@ -1544,7 +1545,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);
@@ -1553,7 +1554,7 @@ function createTimelineItem(textbus, theme) {
 class TimelineComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const registry = textbus.get(core$1.Registry);
-        return new TimelineComponent(textbus, {
+        return new TimelineComponent({
             items: json.items.map(i => {
                 return {
                     theme: i.theme,
@@ -1587,16 +1588,16 @@ Object.defineProperty(TimelineComponent, "type", {
     value: core$1.ContentType.BlockComponent
 });
 
-function createStepItem(textbus) {
+function createStepItem() {
     const slot = new core$1.Slot([
         core$1.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);
@@ -1605,7 +1606,7 @@ function createStepItem(textbus) {
 class StepComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const registry = textbus.get(core$1.Registry);
-        return new StepComponent(textbus, {
+        return new StepComponent({
             step: json.step,
             items: json.items.map(i => {
                 return {
@@ -1645,17 +1646,17 @@ Object.defineProperty(StepComponent, "type", {
 class ParagraphComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(core$1.Registry).createSlot(json.slot);
-        return new ParagraphComponent(textbus, {
+        return new ParagraphComponent({
             slot
         });
     }
-    constructor(textbus, state = {
+    constructor(state = {
         slot: new core$1.Slot([
             core$1.ContentType.InlineComponent,
             core$1.ContentType.Text
         ])
     }) {
-        super(textbus, state);
+        super(state);
     }
     getSlots() {
         return [this.state.slot];
@@ -1668,7 +1669,7 @@ class ParagraphComponent extends core$1.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 ||
@@ -1711,7 +1712,7 @@ const paragraphComponentLoader = {
         return returnableContentTypes.includes(core$1.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;
@@ -1729,7 +1730,7 @@ const paragraphComponentLoader = {
             core$1.ContentType.InlineComponent,
             core$1.ContentType.BlockComponent
         ]), content).toDelta();
-        const results = deltaToBlock(delta, textbus);
+        const results = deltaToBlock(delta);
         if (results.length === 1) {
             return results[0];
         }
@@ -1742,7 +1743,7 @@ const paragraphComponentLoader = {
         return containerSlot;
     }
 };
-function deltaToBlock(delta, textbus) {
+function deltaToBlock(delta) {
     const results = [];
     let slot = null;
     for (const item of delta) {
@@ -1755,7 +1756,7 @@ function deltaToBlock(delta, textbus) {
                 delta.attributes.forEach((value, key) => {
                     slot.setAttribute(key, value);
                 });
-                results.push(new ParagraphComponent(textbus, {
+                results.push(new ParagraphComponent({
                     slot
                 }));
             }
@@ -1920,7 +1921,7 @@ class SourceCodeComponent extends core$1.Component {
     }
     static fromJSON(textbus, json) {
         const registry = textbus.get(core$1.Registry);
-        return new SourceCodeComponent(textbus, {
+        return new SourceCodeComponent({
             slots: json.slots.map(item => {
                 return {
                     slot: registry.createSlot(item.slot),
@@ -1950,7 +1951,7 @@ class SourceCodeComponent extends core$1.Component {
                         core$1.ContentType.InlineComponent,
                         core$1.ContentType.Text
                     ]);
-                    const paragraph = new ParagraphComponent(textbus, {
+                    const paragraph = new ParagraphComponent({
                         slot
                     });
                     const index = parentSlot.indexOf(parentComponent);
@@ -2288,7 +2289,8 @@ function SourceCodeView(props) {
                                         }
                                     }
                                     return core$1.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
                                     }, [
                                         core$1.createVNode('span', { class: 'xnote-source-code-line-content' }, children)
                                     ]);
@@ -2324,7 +2326,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');
@@ -2347,7 +2349,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',
@@ -2442,7 +2444,7 @@ function registerTextIndentShortcut(textbus) {
 
 class ImageComponent extends core$1.Component {
     static fromJSON(textbus, json) {
-        return new ImageComponent(textbus, Object.assign({}, json));
+        return new ImageComponent(Object.assign({}, json));
     }
     getSlots() {
         return [];
@@ -2482,9 +2484,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'
@@ -2493,8 +2495,8 @@ const imageComponentLoader = {
 };
 
 class VideoComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        return new VideoComponent(textbus, Object.assign({}, json));
+    static fromJSON(_, json) {
+        return new VideoComponent(Object.assign({}, json));
     }
     getSlots() {
         return [];
@@ -2534,9 +2536,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'
@@ -2546,18 +2548,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,
@@ -2570,12 +2560,11 @@ let ToolService = class ToolService {
             writable: true,
             value: void 0
         });
-        const [state, updateState] = hooks.useProduce({
+        this.state = core.createSignal({
             inSourceCode: false,
             readonly: controller.readonly,
             selectEmbed: false,
         });
-        this.state = state;
         this.sub = core$1.merge(selection.onChange, controller.onReadonlyStateChange).subscribe(() => {
             const { startSlot, endSlot, startOffset, endOffset } = selection;
             let is = false;
@@ -2585,10 +2574,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
             });
         });
     }
@@ -2612,7 +2601,7 @@ function AttrTool(props) {
     const selection = core.inject(core$1.Selection);
     const query = core.inject(core$1.Query);
     const refreshService = core.inject(exports.RefreshService);
-    const [checkStates, setCheckStates] = hooks.useProduce({
+    const checkStates = core.reactive({
         textAlign: 'left',
         textIndent: 0
     });
@@ -2620,23 +2609,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 === core$1.QueryStateType.Enabled ? textAlignState.value : 'left';
-            draft.textIndent = textIndentState.state === core$1.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 === core$1.QueryStateType.Enabled ? textAlignState.value : 'left';
+        checkStates.textIndent = textIndentState.state === core$1.QueryStateType.Enabled ? textIndentState.value : 0;
     }
     updateCheckStates();
     const subscription = refreshService.onRefresh.subscribe(() => {
@@ -2685,20 +2672,19 @@ function AttrTool(props) {
     }
     const commonState = useCommonState();
     return scopedCss.withScopedCSS(scopedId$e, () => {
-        const states = checkStates();
         const b = commonState().inSourceCode || commonState().readonly;
         return (jsxRuntime.jsx(Dropdown, { disabled: b, width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'L', modKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'L', modKey: true } }), checked: checkStates.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
                     value: 't-l'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'R', modKey: true } }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'R', modKey: true } }), checked: checkStates.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
                     value: 't-r'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'E', modKey: true } }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'E', modKey: true } }), checked: checkStates.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
                     value: 't-c'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'J', modKey: true } }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'J', modKey: true } }), checked: checkStates.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
                     value: 't-j'
                 }, {
                     label: jsxRuntime.jsx(Divider, {}),
@@ -2710,7 +2696,7 @@ function AttrTool(props) {
                     label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'Tab', shiftKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
                     value: 'i-'
                 }
-            ], children: props.children || jsxRuntime.jsx(Button, { disabled: b, arrow: true, highlight: false, children: jsxRuntime.jsx("span", { class: `xnote-icon-paragraph-${states.textAlign || 'left'} icon` }) }) }));
+            ], children: props.children || jsxRuntime.jsx(Button, { disabled: b, arrow: true, highlight: false, children: jsxRuntime.jsx("span", { class: `xnote-icon-paragraph-${checkStates.textAlign || 'left'} icon` }) }) }));
     });
 }
 
@@ -2825,7 +2811,7 @@ const defaultColumnWidth = 100;
 class TableComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const registry = textbus.get(core$1.Registry);
-        return new TableComponent(textbus, {
+        return new TableComponent({
             columnsConfig: json.columnsConfig || [],
             mergeConfig: json.mergeConfig || [],
             rows: json.rows.map(row => {
@@ -2841,14 +2827,14 @@ class TableComponent extends core$1.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 core$1.Slot([core$1.ContentType.BlockComponent]);
                     slot.insert(p);
                     return {
@@ -2859,18 +2845,18 @@ class TableComponent extends core$1.Component {
             };
         })
     }) {
-        super(textbus, state);
+        super(state);
         Object.defineProperty(this, "selection", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: this.textbus.get(core$1.Selection)
+            value: void 0
         });
         Object.defineProperty(this, "commander", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: this.textbus.get(core$1.Commander)
+            value: void 0
         });
         Object.defineProperty(this, "focus", {
             enumerable: true,
@@ -3135,6 +3121,8 @@ class TableComponent extends core$1.Component {
     }
     setup() {
         const selection = core$1.useContext(core$1.Selection);
+        this.selection = selection;
+        this.commander = core$1.useContext(core$1.Commander);
         core$1.onFocusIn(() => {
             this.focus.next(true);
         });
@@ -3152,7 +3140,7 @@ class TableComponent extends core$1.Component {
                 this.tableSelection.set(null);
             }
         });
-        core$1.onDestroy(() => {
+        core$1.onDetach(() => {
             sub.unsubscribe();
         });
         core$1.onGetRanges(ev => {
@@ -3262,7 +3250,7 @@ class TableComponent extends core$1.Component {
             const slot = new core$1.Slot([
                 core$1.ContentType.BlockComponent,
             ]);
-            slot.insert(new ParagraphComponent(this.textbus, {
+            slot.insert(new ParagraphComponent({
                 slot: new core$1.Slot([
                     core$1.ContentType.InlineComponent,
                     core$1.ContentType.Text
@@ -3287,7 +3275,7 @@ class TableComponent extends core$1.Component {
                 const slot = new core$1.Slot([
                     core$1.ContentType.BlockComponent,
                 ]);
-                slot.insert(new ParagraphComponent(this.textbus, {
+                slot.insert(new ParagraphComponent({
                     slot: new core$1.Slot([
                         core$1.ContentType.InlineComponent,
                         core$1.ContentType.Text
@@ -3368,7 +3356,7 @@ const strikeThroughFormatLoader = {
 class TodolistComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(core$1.Registry).createSlot(json.slot);
-        return new TodolistComponent(textbus, {
+        return new TodolistComponent({
             slot,
             checked: json.checked
         });
@@ -3377,7 +3365,6 @@ class TodolistComponent extends core$1.Component {
         return [this.state.slot];
     }
     setup() {
-        const textbus = core$1.useContext();
         const commander = core$1.useContext(core$1.Commander);
         const selection = core$1.useContext(core$1.Selection);
         core$1.onBreak(ev => {
@@ -3387,7 +3374,7 @@ class TodolistComponent extends core$1.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 core$1.Slot([
                             core$1.ContentType.Text,
                             core$1.ContentType.InlineComponent
@@ -3401,7 +3388,7 @@ class TodolistComponent extends core$1.Component {
                     return;
                 }
             }
-            const nextParagraph = new TodolistComponent(textbus, {
+            const nextParagraph = new TodolistComponent({
                 checked: this.state.checked,
                 slot
             });
@@ -3418,7 +3405,7 @@ class TodolistComponent extends core$1.Component {
                     return false;
                 }
                 const slot = selection.commonAncestorSlot.cut();
-                const paragraph = new ParagraphComponent(textbus, {
+                const paragraph = new ParagraphComponent({
                     slot
                 });
                 commander.replaceComponent(this, paragraph);
@@ -3506,12 +3493,12 @@ const todolistComponentLoader = {
     match(element) {
         return element.dataset.component === TodolistComponent.componentName;
     },
-    read(element, injector, slotParser) {
+    read(element, _, slotParser) {
         const slot = slotParser(new core$1.Slot([
             core$1.ContentType.Text,
             core$1.ContentType.InlineComponent
         ]), element.children[1]);
-        return new TodolistComponent(injector, {
+        return new TodolistComponent({
             checked: element.children[0].hasAttribute('checked'),
             slot
         });
@@ -3530,7 +3517,7 @@ function toList(textbus, type) {
         },
         stateFactory(slots) {
             return slots.map((slot, index) => {
-                return new ListComponent(textbus, {
+                return new ListComponent({
                     type,
                     reorder: index === 0,
                     slot
@@ -3554,7 +3541,7 @@ function registerListShortcut(textbus) {
 }
 class ListComponent extends core$1.Component {
     static fromJSON(textbus, json) {
-        return new ListComponent(textbus, {
+        return new ListComponent({
             type: json.type,
             reorder: json.reorder,
             slot: textbus.get(core$1.Registry).createSlot(json.slot)
@@ -3564,7 +3551,6 @@ class ListComponent extends core$1.Component {
         return [this.state.slot];
     }
     setup() {
-        const textbus = core$1.useContext();
         const commander = core$1.useContext(core$1.Commander);
         const selection = core$1.useContext(core$1.Selection);
         const updateAfterList = (ref) => {
@@ -3594,7 +3580,7 @@ class ListComponent extends core$1.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 core$1.Slot([
                             core$1.ContentType.Text,
                             core$1.ContentType.InlineComponent
@@ -3609,7 +3595,7 @@ class ListComponent extends core$1.Component {
                     return;
                 }
             }
-            const nextList = new ListComponent(textbus, {
+            const nextList = new ListComponent({
                 slot,
                 reorder: false,
                 type: this.state.type
@@ -3628,7 +3614,7 @@ class ListComponent extends core$1.Component {
                     return false;
                 }
                 const slot = selection.commonAncestorSlot.cut();
-                const paragraph = new ParagraphComponent(textbus, {
+                const paragraph = new ParagraphComponent({
                     slot
                 });
                 commander.replaceComponent(this, paragraph);
@@ -3804,7 +3790,7 @@ const listComponentLoader = {
                 core$1.ContentType.InlineComponent,
                 core$1.ContentType.Text
             ]), element.querySelector('.xnote-list-content') || document.createElement('div'));
-            return new ListComponent(textbus, {
+            return new ListComponent({
                 slot,
                 reorder: element.dataset.reorder !== 'false',
                 type
@@ -3818,7 +3804,7 @@ const listComponentLoader = {
                 core$1.ContentType.InlineComponent,
                 core$1.ContentType.Text
             ]), i);
-            const component = new ListComponent(textbus, {
+            const component = new ListComponent({
                 slot,
                 reorder: index === 0,
                 type
@@ -3833,7 +3819,7 @@ function useActiveBlock() {
     const query = core.inject(core$1.Query);
     const selection = core.inject(core$1.Selection);
     const refreshService = core.inject(exports.RefreshService);
-    const [checkStates, setCheckStates] = hooks.useProduce({
+    const checkStates = core.reactive({
         paragraph: false,
         h1: false,
         h2: false,
@@ -3850,22 +3836,20 @@ function useActiveBlock() {
         highlightBox: false
     });
     function updateCheckStates(range) {
-        setCheckStates(draft => {
-            const heading = query.queryAttributeByRange(headingAttr, range);
-            draft.paragraph = query.queryComponentByRange(ParagraphComponent, range).state === core$1.QueryStateType.Enabled;
-            draft.h1 = draft.h2 = draft.h3 = draft.h4 = draft.h5 = draft.h6 = false;
-            if (heading.state === core$1.QueryStateType.Enabled) {
-                draft[heading.value] = true;
-                draft.paragraph = false;
-            }
-            const queryList = query.queryComponentByRange(ListComponent, range);
-            draft.unorderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'UnorderedList';
-            draft.orderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'OrderedList';
-            draft.table = query.queryComponentByRange(TableComponent, range).state === core$1.QueryStateType.Enabled;
-            draft.todolist = query.queryComponentByRange(TodolistComponent, range).state === core$1.QueryStateType.Enabled;
-            draft.blockquote = query.queryComponentByRange(BlockquoteComponent, range).state === core$1.QueryStateType.Enabled;
-            draft.sourceCode = query.queryComponentByRange(SourceCodeComponent, range).state === core$1.QueryStateType.Enabled;
-        });
+        const heading = query.queryAttributeByRange(headingAttr, range);
+        checkStates.paragraph = query.queryComponentByRange(ParagraphComponent, range).state === core$1.QueryStateType.Enabled;
+        checkStates.h1 = checkStates.h2 = checkStates.h3 = checkStates.h4 = checkStates.h5 = checkStates.h6 = false;
+        if (heading.state === core$1.QueryStateType.Enabled) {
+            checkStates[heading.value] = true;
+            checkStates.paragraph = false;
+        }
+        const queryList = query.queryComponentByRange(ListComponent, range);
+        checkStates.unorderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'UnorderedList';
+        checkStates.orderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'OrderedList';
+        checkStates.table = query.queryComponentByRange(TableComponent, range).state === core$1.QueryStateType.Enabled;
+        checkStates.todolist = query.queryComponentByRange(TodolistComponent, range).state === core$1.QueryStateType.Enabled;
+        checkStates.blockquote = query.queryComponentByRange(BlockquoteComponent, range).state === core$1.QueryStateType.Enabled;
+        checkStates.sourceCode = query.queryComponentByRange(SourceCodeComponent, range).state === core$1.QueryStateType.Enabled;
     }
     const subscription = refreshService.onRefresh.subscribe(() => {
         if (!selection.isSelected) {
@@ -3898,7 +3882,7 @@ function useActiveBlock() {
                 endOffset: selection.endOffset
             });
         }
-        return checkStates();
+        return checkStates;
     };
 }
 
@@ -3929,7 +3913,7 @@ function useBlockTransform() {
                         ]);
                     },
                     stateFactory(slots) {
-                        return slots.map(slot => new ParagraphComponent(textbus, {
+                        return slots.map(slot => new ParagraphComponent({
                             slot
                         }));
                     }
@@ -3937,7 +3921,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);
                     }
@@ -3958,7 +3942,7 @@ function useBlockTransform() {
                     },
                     stateFactory(slots) {
                         return slots.map(slot => {
-                            return new TodolistComponent(textbus, {
+                            return new TodolistComponent({
                                 checked: false,
                                 slot
                             });
@@ -3987,7 +3971,7 @@ function useBlockTransform() {
                             },
                             stateFactory(slots) {
                                 return slots.map(slot => {
-                                    return new ParagraphComponent(textbus, {
+                                    return new ParagraphComponent({
                                         slot
                                     });
                                 });
@@ -4003,7 +3987,7 @@ function useBlockTransform() {
                                 ]);
                             },
                             stateFactory(slots) {
-                                return [new SourceCodeComponent(textbus, {
+                                return [new SourceCodeComponent({
                                         lang: '',
                                         lineNumber: true,
                                         autoBreak: true,
@@ -4035,7 +4019,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;
@@ -4417,7 +4401,7 @@ function BoldTool() {
     const textbus = core.inject(core$1.Textbus);
     const refreshService = core.inject(exports.RefreshService);
     const commonState = useCommonState();
-    const [viewModel, update] = hooks.useProduce({
+    const viewModel = core.reactive({
         highlight: false,
     });
     function toggle() {
@@ -4425,16 +4409,13 @@ function BoldTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(boldFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === core$1.QueryStateType.Enabled;
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
     return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-bold" }) });
+        return jsxRuntime.jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-bold" }) });
     };
 }
 
@@ -4456,7 +4437,7 @@ function CodeTool() {
     const refreshService = core.inject(exports.RefreshService);
     const textbus = core.inject(core$1.Textbus);
     const commonState = useCommonState();
-    const [viewModel, update] = hooks.useProduce({
+    const viewModel = core.reactive({
         highlight: false,
     });
     function toggle() {
@@ -4464,16 +4445,13 @@ function CodeTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(codeFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === core$1.QueryStateType.Enabled;
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
     return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-code" }) });
+        return jsxRuntime.jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-code" }) });
     };
 }
 
@@ -4692,7 +4670,7 @@ class KatexEditor extends core$1.Textbus {
     }
     mount(host, code) {
         this.host = host;
-        const model = new SourceCodeComponent(this, {
+        const model = new SourceCodeComponent({
             lineNumber: true,
             autoBreak: true,
             lang: 'latex',
@@ -4721,15 +4699,15 @@ class KatexEditor extends core$1.Textbus {
 
 class KatexComponent extends core$1.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 [];
@@ -4817,9 +4795,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)
         });
     }
@@ -4863,7 +4841,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);
@@ -4877,7 +4855,7 @@ function InsertMenu(props) {
                         core$1.ContentType.InlineComponent,
                         core$1.ContentType.Text
                     ]);
-                    const list = new ListComponent(textbus, {
+                    const list = new ListComponent({
                         slot,
                         reorder: true,
                         type: type === 'ol' ? 'OrderedList' : 'UnorderedList'
@@ -4891,7 +4869,7 @@ function InsertMenu(props) {
                     const slot = new core$1.Slot([
                         core$1.ContentType.Text
                     ]);
-                    const comp = new SourceCodeComponent(textbus, {
+                    const comp = new SourceCodeComponent({
                         lang: '',
                         lineNumber: true,
                         slots: [{
@@ -4905,7 +4883,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);
@@ -4918,7 +4896,7 @@ function InsertMenu(props) {
                         core$1.ContentType.Text,
                         core$1.ContentType.InlineComponent
                     ]);
-                    const comp = new TodolistComponent(textbus, {
+                    const comp = new TodolistComponent({
                         slot,
                         checked: false
                     });
@@ -4929,7 +4907,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);
@@ -4939,7 +4917,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);
@@ -4948,8 +4926,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);
@@ -4957,8 +4935,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);
@@ -4966,17 +4944,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);
@@ -5009,7 +4987,7 @@ function ItalicTool() {
     const query = core.inject(core$1.Query);
     const refreshService = core.inject(exports.RefreshService);
     const textbus = core.inject(core$1.Textbus);
-    const [viewModel, update] = hooks.useProduce({
+    const viewModel = core.reactive({
         highlight: false,
     });
     function toggle() {
@@ -5017,17 +4995,14 @@ function ItalicTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(italicFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === core$1.QueryStateType.Enabled;
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-italic" }) });
+        return jsxRuntime.jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-italic" }) });
     };
 }
 
@@ -5136,7 +5111,7 @@ function StrikeThroughTool() {
     const query = core.inject(core$1.Query);
     const refreshService = core.inject(exports.RefreshService);
     const textbus = core.inject(core$1.Textbus);
-    const [viewModel, update] = hooks.useProduce({
+    const viewModel = core.reactive({
         highlight: false,
     });
     function toggle() {
@@ -5144,17 +5119,14 @@ function StrikeThroughTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(strikeThroughFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === core$1.QueryStateType.Enabled;
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-strikethrough" }) });
+        return jsxRuntime.jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-strikethrough" }) });
     };
 }
 
@@ -5162,13 +5134,11 @@ function SubscriptTool() {
     const query = core.inject(core$1.Query);
     const selection = core.inject(core$1.Selection);
     const commander = core.inject(core$1.Commander);
-    const [state, updateState] = hooks.useProduce({
+    const state = core.reactive({
         highlight: false
     });
     const sub = selection.onChange.subscribe(() => {
-        updateState(draft => {
-            draft.highlight = getState();
-        });
+        state.highlight = getState();
     });
     function getState() {
         const s = query.queryFormat(subscriptFormatter);
@@ -5189,7 +5159,7 @@ function SubscriptTool() {
     }
     const commonState = useCommonState();
     return () => {
-        return (jsxRuntime.jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, highlight: state().highlight, onClick: apply, children: jsxRuntime.jsx("span", { class: "xnote-icon-subscript" }) }));
+        return (jsxRuntime.jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, highlight: state.highlight, onClick: apply, children: jsxRuntime.jsx("span", { class: "xnote-icon-subscript" }) }));
     };
 }
 
@@ -5197,13 +5167,11 @@ function SuperscriptTool() {
     const query = core.inject(core$1.Query);
     const selection = core.inject(core$1.Selection);
     const commander = core.inject(core$1.Commander);
-    const [state, updateState] = hooks.useProduce({
+    const state = core.reactive({
         highlight: false
     });
     const sub = selection.onChange.subscribe(() => {
-        updateState(draft => {
-            draft.highlight = getState();
-        });
+        state.highlight = getState();
     });
     function getState() {
         const s = query.queryFormat(superscriptFormatter);
@@ -5224,7 +5192,7 @@ function SuperscriptTool() {
     }
     const commonState = useCommonState();
     return () => {
-        return (jsxRuntime.jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, highlight: state().highlight, onClick: apply, children: jsxRuntime.jsx("span", { class: "xnote-icon-superscript" }) }));
+        return (jsxRuntime.jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, highlight: state.highlight, onClick: apply, children: jsxRuntime.jsx("span", { class: "xnote-icon-superscript" }) }));
     };
 }
 
@@ -5326,7 +5294,7 @@ function UnderlineTool() {
     const query = core.inject(core$1.Query);
     const refreshService = core.inject(exports.RefreshService);
     const textbus = core.inject(core$1.Textbus);
-    const [viewModel, update] = hooks.useProduce({
+    const viewModel = core.reactive({
         highlight: false,
     });
     function toggle() {
@@ -5334,17 +5302,14 @@ function UnderlineTool() {
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const state = query.queryFormat(underlineFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
-        });
+        viewModel.highlight = state.state === core$1.QueryStateType.Enabled;
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-underline" }) });
+        return jsxRuntime.jsx(Button, { highlight: viewModel.highlight, disabled: commonState().inSourceCode || commonState().readonly || commonState().selectEmbed, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-underline" }) });
     };
 }
 
@@ -5536,7 +5501,7 @@ const cellBackgroundAttrLoader = {
 function CellBackgroundTool() {
     const refreshService = core.inject(exports.RefreshService);
     const selection = core.inject(core$1.Selection);
-    const [viewModel, update] = hooks.useProduce({
+    const viewModel = core.reactive({
         disabled: false,
     });
     function setColor(picker) {
@@ -5577,9 +5542,7 @@ function CellBackgroundTool() {
         }
     }
     const sub = refreshService.onRefresh.subscribe(() => {
-        update(draft => {
-            draft.disabled = !isInTable(selection);
-        });
+        viewModel.disabled = !isInTable(selection);
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
@@ -5595,8 +5558,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 (jsxRuntime.jsx(Dropdown, { width: '177px', disabled: d, menu: jsxRuntime.jsx(ColorPicker, { recentColors: defaultColors, onSelected: setColor }), trigger: 'hover', children: jsxRuntime.jsx(Button, { disabled: d, arrow: true, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) }) }));
     };
 }
@@ -5604,7 +5566,7 @@ function CellBackgroundTool() {
 function MergeCellsTool() {
     const refreshService = core.inject(exports.RefreshService);
     const selection = core.inject(core$1.Selection);
-    const [viewModel, update] = hooks.useProduce({
+    const viewModel = core.reactive({
         highlight: false,
         disabled: false,
     });
@@ -5615,33 +5577,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;
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled || commonState().readonly || commonState().inSourceCode, onClick: merge, children: jsxRuntime.jsx("span", { class: "xnote-icon-merge-cells" }) });
+        return jsxRuntime.jsx(Button, { highlight: viewModel.highlight, disabled: viewModel.disabled || commonState().readonly || commonState().inSourceCode, onClick: merge, children: jsxRuntime.jsx("span", { class: "xnote-icon-merge-cells" }) });
     };
 }
 
 function SplitCellsTool() {
     const refreshService = core.inject(exports.RefreshService);
     const selection = core.inject(core$1.Selection);
-    const [viewModel, update] = hooks.useProduce({
+    const viewModel = core.reactive({
         highlight: false,
         disabled: false,
     });
@@ -5666,47 +5625,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;
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled || commonState().readonly || commonState().inSourceCode, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-split-cells" }) });
+        return jsxRuntime.jsx(Button, { highlight: viewModel.highlight, disabled: viewModel.disabled || commonState().readonly || commonState().inSourceCode, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-split-cells" }) });
     };
 }
 
@@ -5742,15 +5698,13 @@ const LeftToolbar = core.withAnnotation({
             refreshService.onRefresh.next();
         }
     }
-    const [positionSignal, updatePosition] = hooks.useProduce({
+    const positionSignal = core.reactive({
         left: 0,
         top: 0,
         display: false
     });
     const sub = editorService.onLeftToolbarCanVisibleChange.subscribe(() => {
-        updatePosition(d => {
-            d.display = editorService.canShowLeftToolbar;
-        });
+        positionSignal.display = editorService.canShowLeftToolbar;
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
@@ -5788,18 +5742,14 @@ const LeftToolbar = core.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);
             }
         });
@@ -5878,7 +5828,6 @@ const LeftToolbar = core.withAnnotation({
     }
     return scopedCss.withScopedCSS(scopedId$a, () => {
         var _a;
-        const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" });
         const states = checkStates(slot);
@@ -5908,9 +5857,9 @@ const LeftToolbar = core.withAnnotation({
         const activeParentComponent = (_a = activeSlot()) === null || _a === void 0 ? void 0 : _a.parent;
         const needInsert = activeParentComponent instanceof TableComponent || activeParentComponent instanceof SourceCodeComponent;
         return (jsxRuntime.jsx("div", { class: "left-toolbar", ref: toolbarRef, children: jsxRuntime.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: jsxRuntime.jsx(Dropdown, { toLeft: true, onExpendStateChange: changeIgnoreMove, abreast: true, style: {
                         position: 'absolute',
                         right: 0,
@@ -6038,14 +5987,14 @@ const InlineToolbar = core.withAnnotation({
     const subscription = core$1.merge(textbus.onChange, selection.onChange).pipe(core$1.debounceTime(20), core$1.tap(() => {
         refreshService.onRefresh.next();
     }), core$1.delay(200)).subscribe(() => {
-        if (viewPosition().isHide) {
+        if (viewPosition.isHide) {
             editorService.changeLeftToolbarVisible(true);
         }
     });
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
-    const [viewPosition, updateViewPosition] = hooks.useProduce({
+    const viewPosition = core.reactive({
         left: 0,
         top: 0,
         isHide: true,
@@ -6123,21 +6072,17 @@ const InlineToolbar = core.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(core$1.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;
             }
         }
@@ -6160,11 +6105,9 @@ const InlineToolbar = core.withAnnotation({
             return !selection.isCollapsed && !(selection.commonAncestorComponent instanceof SourceCodeComponent);
         }), core$1.map(getTop), core$1.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 {
@@ -6177,11 +6120,9 @@ const InlineToolbar = core.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 = core.getCurrentInstance();
@@ -6194,14 +6135,13 @@ const InlineToolbar = core.withAnnotation({
         mouseupSubscription.unsubscribe();
     });
     return scopedCss.withScopedCSS(scopedId$8, () => {
-        const p = viewPosition();
         return (jsxRuntime.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: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
@@ -6289,10 +6229,11 @@ class StaticToolbarPlugin {
         const container = document.createElement('div');
         container.style.position = 'relative';
         container.style.borderRadius = 'inherit';
-        this.app = platformBrowser$1.createApp(jsxRuntime.jsx(core.Context, { providers: [{
-                    provide: DropdownMenuContainer,
-                    useValue: container
-                }], children: jsxRuntime.jsx(StaticToolbar, { theme: this.options.theme }) }), {
+        const Context = core.createContext([{
+                provide: DropdownMenuContainer,
+                useValue: container
+            }]);
+        this.app = platformBrowser$1.createApp(jsxRuntime.jsx(Context, { children: jsxRuntime.jsx(StaticToolbar, { theme: this.options.theme }) }), {
             context: injector
         });
         this.options.host.appendChild(container);
@@ -6324,39 +6265,30 @@ const SuspensionToolbar = core.withAnnotation({
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
-    const [styles, updateStyles] = hooks.useProduce({
+    const styles = core.reactive({
         top: 0,
         opacity: 1,
     });
     subscription.add(core$1.fromEvent(document, 'scroll').pipe(core$1.tap(() => {
-        updateStyles(draft => {
-            draft.opacity = 0;
-        });
+        styles.opacity = 0;
     }), core$1.debounceTime(100), core$1.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;
         }
     }), core$1.delay(100)).subscribe(() => {
-        updateStyles(draft => {
-            draft.opacity = 1;
-        });
+        styles.opacity = 1;
     }));
     return scopedCss.withScopedCSS(scopedId$6, () => {
-        const s = styles();
         return (jsxRuntime.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: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UndoTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(RedoTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(InsertTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
@@ -6539,7 +6471,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);
         }
@@ -6550,21 +6482,21 @@ class AtComponent extends core$1.Component {
         const registry = textbus.get(core$1.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 core$1.Slot([core$1.ContentType.Text])
     }) {
         if (!state.userInfo && !state.slot) {
             state.slot = new core$1.Slot([core$1.ContentType.Text]);
         }
-        super(textbus, state);
+        super(state);
         Object.defineProperty(this, "focus", {
             enumerable: true,
             configurable: true,
@@ -6587,13 +6519,13 @@ class AtComponent extends core$1.Component {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: this.textbus.get(core$1.Selection)
+            value: void 0
         });
         Object.defineProperty(this, "organization", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: this.textbus.get(Organization)
+            value: void 0
         });
     }
     getSlots() {
@@ -6606,6 +6538,8 @@ class AtComponent extends core$1.Component {
         return [];
     }
     setup() {
+        this.selection = core$1.useContext(core$1.Selection);
+        this.organization = core$1.useContext(Organization);
         let isFocus = false;
         core$1.onFocus(() => {
             isFocus = true;
@@ -6680,7 +6614,7 @@ class AtComponent extends core$1.Component {
                 this.focus.next(true);
             }
         });
-        core$1.onDestroy(() => {
+        core$1.onDetach(() => {
             subs.unsubscribe();
         });
     }
@@ -6770,12 +6704,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 core$1.Slot([core$1.ContentType.Text]), element.querySelector('.xnote-at-input') || document.createElement('div'));
-        return new AtComponent(textbus, {
+        return new AtComponent({
             slot
         });
     }
@@ -6793,7 +6727,7 @@ class RootComponent extends core$1.Component {
     }
     static fromJSON(textbus, json) {
         const content = textbus.get(core$1.Registry).createSlot(json.content);
-        return new RootComponent(textbus, {
+        return new RootComponent({
             content
         });
     }
@@ -6822,7 +6756,7 @@ class RootComponent extends core$1.Component {
         }
         const selection = this.textbus.get(core$1.Selection);
         content.retain(content.length);
-        const newParagraph = new ParagraphComponent(this.textbus);
+        const newParagraph = new ParagraphComponent();
         content.insert(newParagraph);
         selection.setPosition(newParagraph.state.slot, 0);
     }
@@ -6871,7 +6805,7 @@ const rootComponentLoader = {
     match() {
         return true;
     },
-    read(element, textbus, slotParser) {
+    read(element, _, slotParser) {
         const delta = slotParser(new core$1.Slot([
             core$1.ContentType.BlockComponent,
             core$1.ContentType.InlineComponent,
@@ -6880,7 +6814,7 @@ const rootComponentLoader = {
         const slot = new core$1.Slot([
             core$1.ContentType.BlockComponent
         ]);
-        deltaToBlock(delta, textbus).forEach(i => {
+        deltaToBlock(delta).forEach(i => {
             slot.insert(i);
         });
         return slot;
@@ -7126,7 +7060,7 @@ function Scroll(props) {
     const scrollRef = core.createRef();
     const input = core.inject(platformBrowser.Input);
     const tableService = core.inject(TableService);
-    const [showShadow, updateShowShadow] = hooks.useProduce({
+    const showShadow = core.reactive({
         leftEnd: false,
         rightEnd: false
     });
@@ -7136,10 +7070,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 = core$1.fromEvent(el, 'scroll').subscribe(update);
@@ -7147,15 +7079,13 @@ function Scroll(props) {
     });
     core.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 scopedCss.withScopedCSS(scopedId$3, () => {
         return jsxRuntime.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 => {
@@ -7298,34 +7228,30 @@ var scopedId$1 = "vf-d4c4a9";
 function ResizeRow(props) {
     const dragLineRef = core.createRef();
     const tableService = core.inject(TableService);
-    const [styles, updateStyles] = hooks.useProduce({
+    const styles = core.reactive({
         visible: false,
         top: 0
     });
     core.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 scopedCss.withScopedCSS(scopedId$1, () => {
         return jsxRuntime.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' });
     });
@@ -7334,7 +7260,7 @@ function ResizeRow(props) {
 var scopedId = "vf-4a5ad1";
 
 function SelectionMask(props) {
-    const [styles, updateStyles] = hooks.useProduce({
+    const styles = core.reactive({
         visible: false,
         left: 0,
         top: 0,
@@ -7348,6 +7274,7 @@ function SelectionMask(props) {
     });
     core.watch(props.component.tableSelection, update);
     function update() {
+        var _a;
         const selection = props.component.tableSelection();
         const state = props.component.state;
         if (isShowMask(props.component)) {
@@ -7364,21 +7291,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(core$1.debounceTime(30)).subscribe(() => {
@@ -7388,15 +7310,14 @@ function SelectionMask(props) {
         s.unsubscribe();
     });
     return scopedCss.withScopedCSS(scopedId, () => {
-        const style = styles();
         return (jsxRuntime.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'
             } }));
     });
 }
@@ -7611,7 +7532,7 @@ const tableComponentLoader = {
                         core$1.ContentType.InlineComponent,
                         core$1.ContentType.Text
                     ]), cell).toDelta();
-                    const results = deltaToBlock(delta, textbus);
+                    const results = deltaToBlock(delta);
                     delta.attributes.forEach((value, key) => {
                         slot.setAttribute(key, value);
                     });
@@ -7642,7 +7563,7 @@ const tableComponentLoader = {
                         core$1.ContentType.InlineComponent,
                         core$1.ContentType.Text
                     ]), cell).toDelta();
-                    const results = deltaToBlock(delta, textbus);
+                    const results = deltaToBlock(delta);
                     delta.attributes.forEach((value, key) => {
                         slot.setAttribute(key, value);
                     });
@@ -7669,7 +7590,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 => {
@@ -7758,7 +7679,6 @@ TableSelectionAwarenessDelegate = __decorate([
 
 function TimelineComponentView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
-    const textbus = core.inject(core$1.Textbus);
     const isOutput = useOutput();
     const isReadonly = useReadonly();
     return () => {
@@ -7771,7 +7691,7 @@ function TimelineComponentView(props) {
                                 backgroundColor: item.theme,
                             } }), !isOutput() && !isReadonly() && jsxRuntime.jsxs("div", { class: "xnote-timeline-tools", children: [jsxRuntime.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));
                                     } }), jsxRuntime.jsx(Button, { class: "xnote-timeline-add xnote-icon-bin", onClick: () => {
                                         const index = component.state.items.indexOf(item);
                                         component.state.items.splice(index, 1);
@@ -7787,8 +7707,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 core$1.Slot([
                     core$1.ContentType.BlockComponent
@@ -7804,7 +7724,6 @@ const timelineComponentLoader = {
 
 function StepComponentView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
-    const textbus = core.inject(core$1.Textbus);
     const isOutput = useOutput();
     const isReadonly = useReadonly();
     return () => {
@@ -7830,7 +7749,7 @@ function StepComponentView(props) {
                                         }
                                     }, children: index + 1 })] }), !isOutput() && !isReadonly() && jsxRuntime.jsxs("div", { class: "xnote-step-tools", children: [jsxRuntime.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());
                                     } }), jsxRuntime.jsx(Button, { class: "xnote-step-add xnote-icon-bin", onClick: () => {
                                         const index = component.state.items.indexOf(item);
                                         component.state.items.splice(index, 1);
@@ -7846,8 +7765,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 core$1.Slot([
@@ -8129,7 +8048,7 @@ class Editor extends core$1.Textbus {
             rootComp = this.createModel(config.content);
         }
         else {
-            rootComp = new RootComponent(this, {
+            rootComp = new RootComponent({
                 content: new core$1.Slot([core$1.ContentType.BlockComponent])
             });
         }
@@ -8165,11 +8084,11 @@ class Editor extends core$1.Textbus {
             core$1.ContentType.BlockComponent
         ]);
         if (doc instanceof core$1.Slot) {
-            deltaToBlock(doc.toDelta(), this).forEach(i => {
+            deltaToBlock(doc.toDelta()).forEach(i => {
                 content.insert(i);
             });
         }
-        return new RootComponent(this, {
+        return new RootComponent({
             content
         });
     }