@textbus/xnote 0.1.2 → 0.2.1

package/bundles/index.js

@@ -14,7 +14,7 @@ var Katex = require('katex');
 var adapterViewfly = require('@textbus/adapter-viewfly');
 var collaborate = require('@textbus/collaborate');
 
-var scopedId$o = "vf-d94b56";
+var scopedId$r = "vf-7d288d";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -147,7 +147,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$o, () => {
+    return scopedCss.withScopedCSS(scopedId$r, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -159,7 +159,7 @@ function Button(props) {
     });
 }
 
-var scopedId$n = "vf-d552b9";
+var scopedId$q = "vf-d552b9";
 
 class Picker {
     set hex(color$1) {
@@ -448,7 +448,7 @@ function ColorPicker(props) {
         props.onSelected(picker);
         addRecentColor();
     }
-    return scopedCss.withScopedCSS(scopedId$n, () => {
+    return scopedCss.withScopedCSS(scopedId$q, () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         return (jsxRuntime.jsxs("div", { onMousedown: ev => {
                 ev.stopPropagation();
@@ -499,10 +499,10 @@ function ColorPicker(props) {
     });
 }
 
-var scopedId$m = "vf-ac7e8d";
+var scopedId$p = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return scopedCss.withScopedCSS(scopedId$m, () => {
+    return scopedCss.withScopedCSS(scopedId$p, () => {
         return (jsxRuntime.jsx("div", { class: "component-toolbar", style: props.style, children: jsxRuntime.jsx("div", { class: [
                     'toolbar',
                     {
@@ -512,15 +512,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$l = "vf-ede279";
+var scopedId$o = "vf-ede279";
 
 function Divider() {
-    return scopedCss.withScopedCSS(scopedId$l, () => {
+    return scopedCss.withScopedCSS(scopedId$o, () => {
         return jsxRuntime.jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$k = "vf-d91ad6";
+var scopedId$n = "vf-d91ad6";
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -629,24 +629,25 @@ function DragResize(props) {
         });
     }
     const sizeText = core.createSignal(`${component.state.width}*${component.state.height}`);
-    return scopedCss.withScopedCSS(scopedId$k, () => {
+    return scopedCss.withScopedCSS(scopedId$n, () => {
         return (jsxRuntime.jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsxRuntime.jsx("div", { class: "container", ref: ref, children: props.children }), jsxRuntime.jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsxRuntime.jsx("div", { class: "mask", ref: mask, children: sizeText() }), jsxRuntime.jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var scopedId$j = "vf-a99c5e";
+var scopedId$m = "vf-a99c5e";
 
-var scopedId$i = "vf-8a05e9";
+var scopedId$l = "vf-8a05e9";
 
+const DropdownMenuContainer = new core.InjectionToken('DropdownMenuContainer');
 const DropdownMenuPortal = core.withAnnotation({
     providers: [
         exports.DropdownService
     ]
 }, function DropdownMenuPortal(props) {
     const dropdownContextService = core.inject(exports.DropdownContextService);
-    const container = core.inject(platformBrowser.VIEW_CONTAINER);
+    const container = core.inject(DropdownMenuContainer, core.inject(platformBrowser.VIEW_CONTAINER));
     const menuRef = core.createRef();
     let timer = null;
     const delay = 10;
@@ -736,7 +737,7 @@ const DropdownMenuPortal = core.withAnnotation({
     function stopPropagation(ev) {
         ev.stopPropagation();
     }
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$i, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$l, () => {
         return (jsxRuntime.jsx("div", { onMouseenter: onEnter, onMousedown: stopPropagation, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", style: {
@@ -751,6 +752,9 @@ const Dropdown = core.withAnnotation({
     const isShow = core.createSignal(false);
     const dropdownContextService = core.inject(exports.DropdownContextService);
     const toggle = () => {
+        if (props.disabled) {
+            return;
+        }
         if (dropdownContextService.isOpen) {
             dropdownContextService.hide(false);
         }
@@ -780,11 +784,17 @@ const Dropdown = core.withAnnotation({
         let leaveSub;
         const bindLeave = function () {
             leaveSub = core$1.fromEvent(dropdownRef.current, 'mouseleave').subscribe(() => {
+                if (props.disabled) {
+                    return;
+                }
                 dropdownContextService.hide();
             });
         };
         bindLeave();
         subscription.add(core$1.fromEvent(dropdownRef.current, 'mouseenter').subscribe(() => {
+            if (props.disabled) {
+                return;
+            }
             if (leaveSub) {
                 leaveSub.unsubscribe();
             }
@@ -804,7 +814,7 @@ const Dropdown = core.withAnnotation({
                 dropdownContextService.hide(false);
             }
         },
-        $render: scopedCss.withScopedCSS(scopedId$j, () => {
+        $render: scopedCss.withScopedCSS(scopedId$m, () => {
             return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsxRuntime.jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() &&
                         jsxRuntime.jsx(DropdownMenuPortal, { toLeft: props.toLeft, padding: props.padding, noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
                                 props.menu.map(menu => {
@@ -821,7 +831,7 @@ const Dropdown = core.withAnnotation({
     };
 });
 
-var scopedId$h = "vf-c32a7b";
+var scopedId$k = "vf-c32a7b";
 
 function Keymap(props) {
     const arr = [];
@@ -855,20 +865,20 @@ function Keymap(props) {
             arr.push(jsxRuntime.jsx("span", { children: keymap.key }));
         }
     }
-    return scopedCss.withScopedCSS(scopedId$h, () => {
+    return scopedCss.withScopedCSS(scopedId$k, () => {
         return (jsxRuntime.jsx("span", { class: "keymap", children: arr }));
     });
 }
 
-var scopedId$g = "vf-acaa5f";
+var scopedId$j = "vf-acaa5f";
 
 function MenuHeading(props) {
-    return scopedCss.withScopedCSS(scopedId$g, () => {
+    return scopedCss.withScopedCSS(scopedId$j, () => {
         return (jsxRuntime.jsx("div", { class: "menu-heading", children: props.children }));
     });
 }
 
-var scopedId$f = "vf-c3b9dc";
+var scopedId$i = "vf-c3b9dc";
 
 function MenuItem(props) {
     const dropdownContextService = core.inject(exports.DropdownContextService, null);
@@ -888,7 +898,7 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return scopedCss.withScopedCSS(scopedId$f, () => {
+    return scopedCss.withScopedCSS(scopedId$i, () => {
         return (jsxRuntime.jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxRuntime.jsxs("div", { class: "menu-item-content", children: [jsxRuntime.jsxs("div", { children: [props.icon && jsxRuntime.jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), jsxRuntime.jsx("div", { children: props.desc })] }), props.arrow ?
                     jsxRuntime.jsx("div", { class: "arrow", children: jsxRuntime.jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsxRuntime.jsx("div", { class: [
@@ -898,11 +908,11 @@ function MenuItem(props) {
     });
 }
 
-var scopedId$e = "vf-a23c47";
+var scopedId$h = "vf-a23c47";
 
 function Popup(props) {
     const host = core.inject(platformBrowser.VIEW_CONTAINER);
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$e, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$h, () => {
         return (jsxRuntime.jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -910,15 +920,15 @@ function Popup(props) {
     }), host);
 }
 
-var scopedId$d = "vf-216815";
+var scopedId$g = "vf-cd4d99";
 
 function ToolbarItem(props) {
-    return scopedCss.withScopedCSS(scopedId$d, () => {
+    return scopedCss.withScopedCSS(scopedId$g, () => {
         return (jsxRuntime.jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var scopedId$c = "vf-2a8a65";
+var scopedId$f = "vf-2a8a65";
 
 exports.RefreshService = class RefreshService {
     constructor() {
@@ -2219,6 +2229,37 @@ function registerTextIndentShortcut(textbus) {
     });
 }
 
+let ToolService = class ToolService {
+    constructor(selection, controller) {
+        this.selection = selection;
+        this.controller = controller;
+        const [state, updateState] = hooks.useProduce({
+            inSourceCode: false,
+            readonly: controller.readonly
+        });
+        this.state = state;
+        this.sub = core$1.merge(selection.onChange, controller.onReadonlyStateChange).subscribe(() => {
+            updateState(draft => {
+                draft.readonly = controller.readonly;
+                draft.inSourceCode = selection.commonAncestorComponent instanceof SourceCodeComponent;
+            });
+        });
+    }
+    destroy() {
+        this.sub.unsubscribe();
+    }
+};
+ToolService = __decorate([
+    core.Injectable(),
+    __metadata("design:paramtypes", [core$1.Selection,
+        core$1.Controller])
+], ToolService);
+
+function useCommonState() {
+    const toolService = core.inject(ToolService);
+    return toolService.state;
+}
+
 function AttrTool(props) {
     const commander = core.inject(core$1.Commander);
     const selection = core.inject(core$1.Selection);
@@ -2295,9 +2336,11 @@ function AttrTool(props) {
                 break;
         }
     }
-    return scopedCss.withScopedCSS(scopedId$c, () => {
+    const commonState = useCommonState();
+    return scopedCss.withScopedCSS(scopedId$f, () => {
         const states = checkStates();
-        return (jsxRuntime.jsx(Dropdown, { width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
+        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" }),
                     value: 't-l'
@@ -2320,7 +2363,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, { 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-${states.textAlign || 'left'} icon` }) }) }));
     });
 }
 
@@ -2502,6 +2545,17 @@ class TableComponent extends core$1.Component {
             }
         }
     }
+    splitCellBySlot(slot) {
+        const slots = this.getNormalizedData();
+        for (const item of slots) {
+            for (const cell of item.cells) {
+                if (cell.raw.slot === slot) {
+                    Reflect.deleteProperty(this.state.mergeConfig, cell.raw.id);
+                    return;
+                }
+            }
+        }
+    }
     getMaxRectangle(startSlot, endSlot) {
         let index1 = -1;
         let index2 = -1;
@@ -3573,7 +3627,8 @@ function useBlockTransform() {
 function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
-    return scopedCss.withScopedCSS(scopedId$c, () => {
+    const commonState = useCommonState();
+    return scopedCss.withScopedCSS(scopedId$f, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -3597,7 +3652,8 @@ function BlockTool() {
                 break;
             }
         }
-        return (jsxRuntime.jsx(Dropdown, { width: 'auto', onCheck: transform, trigger: 'hover', menu: [
+        const b = commonState().inSourceCode || commonState().readonly;
+        return (jsxRuntime.jsx(Dropdown, { disabled: b, width: 'auto', onCheck: transform, trigger: 'hover', menu: [
                 {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
                                 modKey: true,
@@ -3662,7 +3718,7 @@ function BlockTool() {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-hightlight-box" }), checked: states.highlightBox, children: "\u9AD8\u4EAE\u5757" }),
                     value: 'highlightBox'
                 }
-            ], children: jsxRuntime.jsx(Button, { arrow: true, highlight: false, children: jsxRuntime.jsx("span", { class: currentType }) }) }));
+            ], children: jsxRuntime.jsx(Button, { disabled: b, arrow: true, highlight: false, children: jsxRuntime.jsx("span", { class: currentType }) }) }));
     });
 }
 
@@ -3840,6 +3896,40 @@ const linkFormatLoader = {
     }
 };
 
+const subscriptFormatter = new core$1.Formatter('sub', {
+    render(children) {
+        return core$1.createVNode('sub', null, children);
+    }
+});
+const subscriptFormatLoader = {
+    match(element) {
+        return element.tagName === 'SUB';
+    },
+    read() {
+        return {
+            formatter: subscriptFormatter,
+            value: true
+        };
+    }
+};
+
+const superscriptFormatter = new core$1.Formatter('super', {
+    render(children) {
+        return core$1.createVNode('sup', null, children);
+    }
+});
+const superscriptFormatLoader = {
+    match(element) {
+        return element.tagName === 'SUP';
+    },
+    read() {
+        return {
+            formatter: superscriptFormatter,
+            value: true
+        };
+    }
+};
+
 const underlineFormatter = new core$1.Formatter('underline', {
     columned: true,
     render(children) {
@@ -3889,9 +3979,9 @@ function BoldTool() {
     const query = core.inject(core$1.Query);
     const textbus = core.inject(core$1.Textbus);
     const refreshService = core.inject(exports.RefreshService);
+    const commonState = useCommonState();
     const [viewModel, update] = hooks.useProduce({
         highlight: false,
-        disabled: false,
     });
     function toggle() {
         toggleBold(textbus);
@@ -3907,7 +3997,20 @@ function BoldTool() {
     });
     return () => {
         const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-bold" }) });
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-bold" }) });
+    };
+}
+
+function CleanFormatsTool() {
+    const commonState = useCommonState();
+    const commander = core.inject(core$1.Commander);
+    function clean() {
+        commander.cleanFormats([
+            linkFormatter
+        ]);
+    }
+    return () => {
+        return (jsxRuntime.jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly, onClick: clean, children: jsxRuntime.jsx("span", { class: "xnote-icon-clear-formatting" }) }));
     };
 }
 
@@ -3915,9 +4018,9 @@ function CodeTool() {
     const query = core.inject(core$1.Query);
     const refreshService = core.inject(exports.RefreshService);
     const textbus = core.inject(core$1.Textbus);
+    const commonState = useCommonState();
     const [viewModel, update] = hooks.useProduce({
         highlight: false,
-        disabled: false,
     });
     function toggle() {
         toggleCode(textbus);
@@ -3933,11 +4036,11 @@ function CodeTool() {
     });
     return () => {
         const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-code" }) });
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-code" }) });
     };
 }
 
-var scopedId$b = "vf-accb31";
+var scopedId$e = "vf-accb31";
 
 function ColorTool(props) {
     const query = core.inject(core$1.Query);
@@ -3948,7 +4051,6 @@ function ColorTool(props) {
     const backgroundColor = core.createSignal('');
     const [viewModel] = hooks.useProduce({
         highlight: false,
-        disabled: false,
     });
     function updateCheckState() {
         if (!props.slot && !selection.isSelected) {
@@ -4000,9 +4102,10 @@ function ColorTool(props) {
         '#90a0e5',
         '#c596e0',
     ];
-    return scopedCss.withScopedCSS(scopedId$b, () => {
+    const commonState = useCommonState();
+    return scopedCss.withScopedCSS(scopedId$e, () => {
         const vm = viewModel();
-        return (jsxRuntime.jsx(Dropdown, { style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
+        return (jsxRuntime.jsx(Dropdown, { disabled: commonState().readonly || commonState().inSourceCode, style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
                                     'no-background': true,
                                     active: textColor() === ''
                                 }, onClick: () => {
@@ -4032,7 +4135,7 @@ function ColorTool(props) {
                                         (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
                                         commander.applyFormat(backgroundColorFormatter, c);
                                     }, style: { backgroundColor: c }, children: "A" });
-                            })] })] }), children: props.children || jsxRuntime.jsx(Button, { highlight: vm.highlight, arrow: true, disabled: vm.disabled, children: jsxRuntime.jsx("span", { class: "background", children: jsxRuntime.jsx("span", { style: {
+                            })] })] }), children: props.children || jsxRuntime.jsx(Button, { highlight: vm.highlight, arrow: true, disabled: commonState().readonly || commonState().inSourceCode, children: jsxRuntime.jsx("span", { class: "background", children: jsxRuntime.jsx("span", { style: {
                             backgroundColor: backgroundColor(),
                             color: textColor()
                         }, children: jsxRuntime.jsx("span", { class: "xnote-icon-color" }) }) }) }) }));
@@ -4132,16 +4235,18 @@ function FontFamilyTool() {
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
         var _a;
-        return (jsxRuntime.jsx(Dropdown, { onCheck: check, menu: fontFamilyOptions.map(i => {
+        const b = commonState().inSourceCode || commonState().readonly;
+        return (jsxRuntime.jsx(Dropdown, { disabled: b, onCheck: check, menu: fontFamilyOptions.map(i => {
                 const disabled = i.value ? !i.value.split(',').map(i => isSupportFont(i.trim())).some(v => v) : false;
                 return {
                     label: jsxRuntime.jsx(MenuItem, { disabled: disabled, checked: currentFontFamily() === i.value, children: i.label }),
                     disabled,
                     value: i.value,
                 };
-            }), children: jsxRuntime.jsx(Button, { arrow: true, highlight: highlight(), children: ((_a = fontFamilyOptions.find(v => {
+            }), children: jsxRuntime.jsx(Button, { disabled: b, arrow: true, highlight: highlight(), children: ((_a = fontFamilyOptions.find(v => {
                     return v.value === currentFontFamily();
                 })) === null || _a === void 0 ? void 0 : _a.label) || '默认' }) }));
     };
@@ -4186,408 +4291,62 @@ function FontSizeTool() {
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
-        return (jsxRuntime.jsx(Dropdown, { onCheck: check, menu: fontSizeOptions.map(i => {
+        const b = commonState().inSourceCode || commonState().readonly;
+        return (jsxRuntime.jsx(Dropdown, { disabled: b, onCheck: check, menu: fontSizeOptions.map(i => {
                 return {
                     label: jsxRuntime.jsx(MenuItem, { checked: currentFontSize() === i, children: i || '默认' }),
                     value: i
                 };
-            }), children: jsxRuntime.jsxs(Button, { arrow: true, highlight: highlight(), children: [jsxRuntime.jsx("span", { class: "xnote-icon-font-size" }), jsxRuntime.jsx("span", { children: currentFontSize() || '默认' })] }) }));
-    };
-}
-
-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({
-        highlight: false,
-        disabled: false,
-    });
-    function toggle() {
-        toggleItalic(textbus);
-    }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const state = query.queryFormat(italicFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
-        });
-    });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-italic" }) });
+            }), children: jsxRuntime.jsxs(Button, { disabled: b, arrow: true, highlight: highlight(), children: [jsxRuntime.jsx("span", { class: "xnote-icon-font-size" }), jsxRuntime.jsx("span", { children: currentFontSize() || '默认' })] }) }));
     };
 }
 
-var scopedId$a = "vf-e74208";
-
-exports.EditorService = class EditorService {
-    constructor() {
-        this.hideInlineToolbar = false;
-        this.canShowLeftToolbar = true;
-        this.onLeftToolbarCanVisibleChange = new core$1.Subject();
-    }
-    changeLeftToolbarVisible(b) {
-        this.canShowLeftToolbar = b;
-        this.onLeftToolbarCanVisibleChange.next();
-    }
-};
-exports.EditorService = __decorate([
-    core.Injectable({
-        provideIn: 'root'
-    })
-], exports.EditorService);
+var scopedId$d = "vf-cf8e1c";
 
-function LinkTool(props) {
-    const selectionBridge = core.inject(platformBrowser.SelectionBridge);
-    const selection = core.inject(core$1.Selection);
-    const commander = core.inject(core$1.Commander);
-    const editorService = core.inject(exports.EditorService);
-    const container = core.inject(platformBrowser.VIEW_CONTAINER);
-    const isShow = core.createSignal(false);
-    const value = core.createSignal('');
-    function setLink(ev) {
-        ev.preventDefault();
-        commander.applyFormat(linkFormatter, {
-            href: value(),
-            target: '_blanK'
-        });
-        isShow.set(false);
-    }
-    let isClickFromSelf = false;
-    const sub = core$1.fromEvent(document, 'click').subscribe(() => {
-        if (isClickFromSelf) {
-            isClickFromSelf = false;
-            return;
-        }
-        editorService.hideInlineToolbar = false;
-        isShow.set(false);
-    });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return scopedCss.withScopedCSS(scopedId$a, () => {
-        const containerRect = container.getBoundingClientRect();
-        const rect = isShow() ? selectionBridge.getRect({
-            slot: selection.focusSlot,
-            offset: selection.focusOffset
-        }) : {};
-        return (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(Button, { onClick: () => {
-                        var _a;
-                        isShow.set(true);
-                        isClickFromSelf = true;
-                        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
-                    }, children: jsxRuntime.jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
-                    jsxRuntime.jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxRuntime.jsxs("form", { onSubmit: setLink, onClick: () => {
-                                isClickFromSelf = true;
-                            }, class: "input-group", children: [jsxRuntime.jsx("input", { onChange: ev => {
-                                        value.set(ev.target.value);
-                                    }, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsxRuntime.jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
-    });
+class FileUploader {
 }
 
-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({
-        highlight: false,
-        disabled: false,
-    });
-    function toggle() {
-        toggleStrikeThrough(textbus);
+class ImageComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        return new ImageComponent(textbus, Object.assign({}, json));
     }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const state = query.queryFormat(strikeThroughFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
-        });
-    });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-strikethrough" }) });
-    };
-}
-
-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({
-        highlight: false,
-        disabled: false,
-    });
-    function toggle() {
-        toggleUnderline(textbus);
+    getSlots() {
+        return [];
     }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const state = query.queryFormat(underlineFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
-        });
-    });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
+}
+ImageComponent.type = core$1.ContentType.InlineComponent;
+ImageComponent.componentName = 'ImageComponent';
+function ImageView(props) {
+    const { name, state } = props.component;
+    const imageRef = core.createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
     return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-underline" }) });
+        if (readonly() || output()) {
+            return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("img", { alt: "", src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx(DragResize, { source: imageRef, component: props.component, children: jsxRuntime.jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }) }));
     };
 }
-
-const cellAlignAttr = new core$1.Attribute('cellAlign', {
-    render(node, formatValue) {
-        node.styles.set('verticalAlign', formatValue);
-    }
-});
-const cellAlignAttrLoader = {
+const imageComponentLoader = {
     match(element) {
-        return element instanceof HTMLTableCellElement && !!element.style.verticalAlign;
+        return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
     },
-    read(element) {
-        return {
-            attribute: cellAlignAttr,
-            value: element.style.verticalAlign
-        };
-    }
-};
-
-function CellAlignTool() {
-    const currentValue = core.createSignal('');
-    const selection = core.inject(core$1.Selection);
-    function check(v) {
-        const commonAncestorComponent = selection.commonAncestorComponent;
-        if (commonAncestorComponent instanceof TableComponent) {
-            const slots = commonAncestorComponent.getSelectedNormalizedSlots();
-            slots.forEach(item => {
-                item.cells.forEach(cell => {
-                    if (cell.visible) {
-                        cell.raw.slot.setAttribute(cellAlignAttr, v);
-                    }
-                });
-            });
-        }
-    }
-    const refreshService = core.inject(exports.RefreshService);
-    const query = core.inject(core$1.Query);
-    const highlight = core.createSignal(false);
-    const subscription = refreshService.onRefresh.subscribe(() => {
-        const result = query.queryAttribute(cellAlignAttr);
-        const isHighlight = result.state === core$1.QueryStateType.Enabled;
-        highlight.set(isHighlight);
-        currentValue.set(isHighlight ? result.value : 'middle');
-    });
-    core.onUnmounted(() => {
-        subscription.unsubscribe();
-    });
-    return () => {
-        return (jsxRuntime.jsx(Dropdown, { onCheck: check, menu: [
-                {
-                    label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'top', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-top" }), children: "\u9876\u90E8\u5BF9\u9F50" }),
-                    value: 'top'
-                },
-                {
-                    label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'middle', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-middle" }), children: "\u5782\u76F4\u5C45\u4E2D" }),
-                    value: 'middle'
-                },
-                {
-                    label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'bottom', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-bottom" }), children: "\u5E95\u90E8\u5BF9\u9F50" }),
-                    value: 'bottom'
-                }
-            ], children: jsxRuntime.jsx(Button, { arrow: true, highlight: highlight(), children: jsxRuntime.jsx("span", { class: 'xnote-icon-align-' + (currentValue() || 'middle') }) }) }));
-    };
-}
-
-const cellBackgroundAttr = new core$1.Attribute('cellBackground', {
-    render(node, formatValue) {
-        const rgba = color.parseCss(formatValue);
-        if (rgba) {
-            const hsl = color.rgb2Hsl(rgba);
-            if (hsl.l > 50) {
-                hsl.l -= 10;
-            }
-            else {
-                hsl.l += Math.max((50 - hsl.l) * 0.55, 10);
-            }
-            hsl.s *= 0.7;
-            const newRgba = color.hsl2Rgb(hsl);
-            node.styles.set('borderColor', `rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${rgba.a || 1})`);
-        }
-        node.styles.set('backgroundColor', formatValue);
-    }
-});
-const cellBackgroundAttrLoader = {
-    match(element) {
-        return (element.tagName === 'TD' || element.tagName === 'TH') && !!element.style.backgroundColor;
-    },
-    read(element) {
-        return {
-            attribute: cellBackgroundAttr,
-            value: element.style.backgroundColor
-        };
-    }
-};
-
-function CellBackgroundTool() {
-    const refreshService = core.inject(exports.RefreshService);
-    const selection = core.inject(core$1.Selection);
-    const [viewModel, update] = hooks.useProduce({
-        highlight: false,
-        disabled: false,
-    });
-    function setColor(picker) {
-        const commonAncestorComponent = selection.commonAncestorComponent;
-        if (commonAncestorComponent instanceof TableComponent) {
-            const slots = commonAncestorComponent.getSelectedNormalizedSlots();
-            if (slots) {
-                slots.map(i => {
-                    return i.cells.filter(t => t.visible).map(i => i.raw.slot);
-                }).flat().forEach(slot => {
-                    const rgba = picker.rgba;
-                    if (rgba) {
-                        slot.setAttribute(cellBackgroundAttr, `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`);
-                    }
-                    else {
-                        slot.removeAttribute(cellBackgroundAttr);
-                    }
-                });
-            }
-        }
-    }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const commonAncestorComponent = selection.commonAncestorComponent;
-        update(draft => {
-            draft.disabled = !(commonAncestorComponent instanceof TableComponent);
-        });
-    });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return () => {
-        const vm = viewModel();
-        return (jsxRuntime.jsx(Dropdown, { width: '177px', menu: jsxRuntime.jsx(ColorPicker, { onSelected: setColor }), trigger: 'hover', children: jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) }) }));
-    };
-}
-
-function MergeCellsTool() {
-    const refreshService = core.inject(exports.RefreshService);
-    const selection = core.inject(core$1.Selection);
-    const [viewModel, update] = hooks.useProduce({
-        highlight: false,
-        disabled: false,
-    });
-    function merge() {
-        const commonAncestorComponent = selection.commonAncestorComponent;
-        if (commonAncestorComponent instanceof TableComponent) {
-            commonAncestorComponent.mergeCellBySelection();
-        }
-    }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const commonAncestorComponent = selection.commonAncestorComponent;
-        update(draft => {
-            draft.disabled = !(commonAncestorComponent instanceof TableComponent);
-        });
-    });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, 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({
-        highlight: false,
-        disabled: false,
-    });
-    function split() {
-        const commonAncestorComponent = selection.commonAncestorComponent;
-        if (commonAncestorComponent instanceof TableComponent) {
-            commonAncestorComponent.splitCellsBySelection();
-        }
-    }
-    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;
-                            }
-                        }
-                    }
-                }
-            }
-            draft.disabled = true;
-        });
-    });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-split-cells" }) });
-    };
-}
-
-var scopedId$9 = "vf-cf8e1c";
-
-class FileUploader {
-}
-
-class ImageComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        return new ImageComponent(textbus, Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
-    }
-}
-ImageComponent.type = core$1.ContentType.InlineComponent;
-ImageComponent.componentName = 'ImageComponent';
-function ImageView(props) {
-    const { name, state } = props.component;
-    const imageRef = core.createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("img", { alt: "", src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
-        }
-        return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx(DragResize, { source: imageRef, component: props.component, children: jsxRuntime.jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }) }));
-    };
-}
-const imageComponentLoader = {
-    match(element) {
-        return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
-    },
-    read(element, textbus) {
-        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
-        return new ImageComponent(textbus, {
-            src: img.src,
-            width: img.style.width || 'auto',
-            height: img.style.height || 'auto'
-        });
+    read(element, textbus) {
+        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
+        return new ImageComponent(textbus, {
+            src: img.src,
+            width: img.style.width || 'auto',
+            height: img.style.height || 'auto'
+        });
     }
 };
 
@@ -4788,7 +4547,7 @@ const katexComponentLoader = {
     }
 };
 
-function InsertTool(props) {
+function InsertMenu(props) {
     const commander = core.inject(core$1.Commander);
     const selection = core.inject(core$1.Selection);
     const textbus = core.inject(core$1.Textbus);
@@ -4917,45 +4676,642 @@ function InsertTool(props) {
                     insertComponent(comp);
                     selection.setPosition(p.state.slot, 0);
                 }
-                break;
-            case 'katex':
-                {
-                    const p = new ParagraphComponent(textbus);
-                    const comp = new KatexComponent(textbus);
-                    p.state.slot.insert(comp);
-                    insertComponent(p);
-                    selection.selectComponent(comp);
+                break;
+            case 'katex':
+                {
+                    const p = new ParagraphComponent(textbus);
+                    const comp = new KatexComponent(textbus);
+                    p.state.slot.insert(comp);
+                    insertComponent(p);
+                    selection.selectComponent(comp);
+                }
+                break;
+            case 'step':
+                {
+                    const step = new StepComponent(textbus, {
+                        step: 0,
+                        items: [createStepItem(textbus)]
+                    });
+                    insertComponent(step);
+                    selection.selectFirstPosition(step, false, true);
+                }
+                break;
+            case 'timeline': {
+                const timeline = new TimelineComponent(textbus, {
+                    items: [createTimelineItem(textbus, '#296eff')]
+                });
+                insertComponent(timeline);
+                selection.selectFirstPosition(timeline, false, true);
+                break;
+            }
+        }
+    }
+    return scopedCss.withScopedCSS(scopedId$d, () => {
+        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.hideTitle ? null : jsxRuntime.jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: () => insert('table'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('image'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('video'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('katex'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('step'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-step" }), children: "\u6B65\u9AA4\u6761" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('timeline'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-timeline" }), children: "\u65F6\u95F4\u8F74" })] });
+    });
+}
+
+function InsertTool() {
+    const selection = core.inject(core$1.Selection);
+    const instance = core.getCurrentInstance();
+    const sub = selection.onChange.subscribe(() => {
+        instance.markAsDirtied();
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const commonState = useCommonState();
+    return () => {
+        const b = commonState().readonly;
+        return (jsxRuntime.jsx(Dropdown, { disabled: b, menu: jsxRuntime.jsx(InsertMenu, { replace: false, hideTitle: true, slot: selection.focusSlot }), children: jsxRuntime.jsx(Button, { disabled: b, arrow: true, children: "\u63D2\u5165" }) }));
+    };
+}
+
+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({
+        highlight: false,
+    });
+    function toggle() {
+        toggleItalic(textbus);
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const state = query.queryFormat(italicFormatter);
+        update(draft => {
+            draft.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, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-italic" }) });
+    };
+}
+
+var scopedId$c = "vf-e74208";
+
+exports.EditorService = class EditorService {
+    constructor() {
+        this.hideInlineToolbar = false;
+        this.canShowLeftToolbar = true;
+        this.onLeftToolbarCanVisibleChange = new core$1.Subject();
+    }
+    changeLeftToolbarVisible(b) {
+        this.canShowLeftToolbar = b;
+        this.onLeftToolbarCanVisibleChange.next();
+    }
+};
+exports.EditorService = __decorate([
+    core.Injectable({
+        provideIn: 'root'
+    })
+], exports.EditorService);
+
+function LinkTool(props) {
+    const selectionBridge = core.inject(platformBrowser.SelectionBridge);
+    const selection = core.inject(core$1.Selection);
+    const commander = core.inject(core$1.Commander);
+    const editorService = core.inject(exports.EditorService);
+    const container = core.inject(platformBrowser.VIEW_CONTAINER);
+    const isShow = core.createSignal(false);
+    const value = core.createSignal('');
+    function setLink(ev) {
+        ev.preventDefault();
+        commander.applyFormat(linkFormatter, {
+            href: value(),
+            target: '_blanK'
+        });
+        isShow.set(false);
+    }
+    let isClickFromSelf = false;
+    const sub = core$1.fromEvent(document, 'click').subscribe(() => {
+        if (isClickFromSelf) {
+            isClickFromSelf = false;
+            return;
+        }
+        editorService.hideInlineToolbar = false;
+        isShow.set(false);
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const commonState = useCommonState();
+    return scopedCss.withScopedCSS(scopedId$c, () => {
+        const containerRect = container.getBoundingClientRect();
+        const rect = isShow() ? selectionBridge.getRect({
+            slot: selection.focusSlot,
+            offset: selection.focusOffset
+        }) : {};
+        return (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly, onClick: () => {
+                        var _a;
+                        isShow.set(true);
+                        isClickFromSelf = true;
+                        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+                    }, children: jsxRuntime.jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
+                    jsxRuntime.jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxRuntime.jsxs("form", { onSubmit: setLink, onClick: () => {
+                                isClickFromSelf = true;
+                            }, class: "input-group", children: [jsxRuntime.jsx("input", { onChange: ev => {
+                                        value.set(ev.target.value);
+                                    }, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsxRuntime.jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
+    });
+}
+
+function RedoTool() {
+    const history = core.inject(core$1.History);
+    const instance = core.getCurrentInstance();
+    function redo() {
+        history.forward();
+    }
+    const sub = history.onChange.subscribe(() => {
+        instance.markAsDirtied();
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const commonState = useCommonState();
+    return () => {
+        return jsxRuntime.jsx(Button, { disabled: !history.canForward || commonState().readonly, onClick: redo, children: jsxRuntime.jsx("span", { class: "xnote-icon-history-forward" }) });
+    };
+}
+
+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({
+        highlight: false,
+    });
+    function toggle() {
+        toggleStrikeThrough(textbus);
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const state = query.queryFormat(strikeThroughFormatter);
+        update(draft => {
+            draft.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, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-strikethrough" }) });
+    };
+}
+
+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({
+        highlight: false
+    });
+    const sub = selection.onChange.subscribe(() => {
+        updateState(draft => {
+            draft.highlight = getState();
+        });
+    });
+    function getState() {
+        const s = query.queryFormat(subscriptFormatter);
+        return s.state === core$1.QueryStateType.Enabled;
+    }
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    function apply() {
+        const is = getState();
+        if (is) {
+            commander.unApplyFormat(subscriptFormatter);
+        }
+        else {
+            commander.unApplyFormat(superscriptFormatter);
+            commander.applyFormat(subscriptFormatter, true);
+        }
+    }
+    const commonState = useCommonState();
+    return () => {
+        return (jsxRuntime.jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly, highlight: state().highlight, onClick: apply, children: jsxRuntime.jsx("span", { class: "xnote-icon-subscript" }) }));
+    };
+}
+
+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({
+        highlight: false
+    });
+    const sub = selection.onChange.subscribe(() => {
+        updateState(draft => {
+            draft.highlight = getState();
+        });
+    });
+    function getState() {
+        const s = query.queryFormat(superscriptFormatter);
+        return s.state === core$1.QueryStateType.Enabled;
+    }
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    function apply() {
+        const is = getState();
+        if (is) {
+            commander.unApplyFormat(superscriptFormatter);
+        }
+        else {
+            commander.unApplyFormat(subscriptFormatter);
+            commander.applyFormat(superscriptFormatter, true);
+        }
+    }
+    const commonState = useCommonState();
+    return () => {
+        return (jsxRuntime.jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly, highlight: state().highlight, onClick: apply, children: jsxRuntime.jsx("span", { class: "xnote-icon-superscript" }) }));
+    };
+}
+
+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({
+        highlight: false,
+    });
+    function toggle() {
+        toggleUnderline(textbus);
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const state = query.queryFormat(underlineFormatter);
+        update(draft => {
+            draft.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, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-underline" }) });
+    };
+}
+
+function UndoTool() {
+    const history = core.inject(core$1.History);
+    const instance = core.getCurrentInstance();
+    function undo() {
+        history.back();
+    }
+    const sub = history.onChange.subscribe(() => {
+        instance.markAsDirtied();
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const commonState = useCommonState();
+    return () => {
+        return jsxRuntime.jsx(Button, { disabled: !history.canBack || commonState().readonly, onClick: undo, children: jsxRuntime.jsx("span", { class: "xnote-icon-history-back" }) });
+    };
+}
+
+const cellAlignAttr = new core$1.Attribute('cellAlign', {
+    render(node, formatValue) {
+        node.styles.set('verticalAlign', formatValue);
+    }
+});
+const cellAlignAttrLoader = {
+    match(element) {
+        return element instanceof HTMLTableCellElement && !!element.style.verticalAlign;
+    },
+    read(element) {
+        return {
+            attribute: cellAlignAttr,
+            value: element.style.verticalAlign
+        };
+    }
+};
+
+function isInTable(selection) {
+    if (selection.commonAncestorComponent instanceof TableComponent) {
+        return true;
+    }
+    if (selection.isCollapsed) {
+        let slot = selection.commonAncestorSlot;
+        while (slot) {
+            if (slot.parent instanceof TableComponent) {
+                return true;
+            }
+            slot = slot.parentSlot;
+        }
+        return false;
+    }
+    const startTable = getParentTable(selection.startSlot);
+    const endTable = getParentTable(selection.endSlot);
+    if (startTable && endTable) {
+        return startTable === endTable;
+    }
+    return false;
+}
+function getParentTable(slot) {
+    while (slot) {
+        if (slot.parent instanceof TableComponent) {
+            return slot.parent;
+        }
+        slot = slot.parentSlot;
+    }
+    return null;
+}
+function getTableSlotBySlot(slot) {
+    while (slot) {
+        if (slot.parent instanceof TableComponent) {
+            return slot;
+        }
+        slot = slot.parentSlot;
+    }
+    return null;
+}
+
+function CellAlignTool() {
+    const currentValue = core.createSignal('');
+    const selection = core.inject(core$1.Selection);
+    function check(v) {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            const slots = commonAncestorComponent.getSelectedNormalizedSlots();
+            slots.forEach(item => {
+                item.cells.forEach(cell => {
+                    if (cell.visible) {
+                        cell.raw.slot.setAttribute(cellAlignAttr, v);
+                    }
+                });
+            });
+        }
+        else {
+            const is = isInTable(selection);
+            if (is) {
+                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.visible && cell.raw.slot === parentSlot) {
+                                    cell.raw.slot.setAttribute(cellAlignAttr, v);
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                    parentSlot = parentSlot.parentSlot;
+                }
+            }
+        }
+    }
+    const refreshService = core.inject(exports.RefreshService);
+    const query = core.inject(core$1.Query);
+    const highlight = core.createSignal(false);
+    const subscription = refreshService.onRefresh.subscribe(() => {
+        if (!isInTable(selection)) {
+            highlight.set(false);
+            currentValue.set('middle');
+            return;
+        }
+        const result = query.queryAttribute(cellAlignAttr);
+        const isHighlight = result.state === core$1.QueryStateType.Enabled;
+        highlight.set(isHighlight);
+        currentValue.set(isHighlight ? result.value : 'middle');
+    });
+    core.onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    return () => {
+        return (jsxRuntime.jsx(Dropdown, { onCheck: check, menu: [
+                {
+                    label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'top', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-top" }), children: "\u9876\u90E8\u5BF9\u9F50" }),
+                    value: 'top'
+                },
+                {
+                    label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'middle', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-middle" }), children: "\u5782\u76F4\u5C45\u4E2D" }),
+                    value: 'middle'
+                },
+                {
+                    label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'bottom', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-bottom" }), children: "\u5E95\u90E8\u5BF9\u9F50" }),
+                    value: 'bottom'
+                }
+            ], children: jsxRuntime.jsx(Button, { arrow: true, highlight: highlight(), children: jsxRuntime.jsx("span", { class: 'xnote-icon-align-' + (currentValue() || 'middle') }) }) }));
+    };
+}
+
+const cellBackgroundAttr = new core$1.Attribute('cellBackground', {
+    render(node, formatValue) {
+        const rgba = color.parseCss(formatValue);
+        if (rgba) {
+            const hsl = color.rgb2Hsl(rgba);
+            if (hsl.l > 50) {
+                hsl.l -= 10;
+            }
+            else {
+                hsl.l += Math.max((50 - hsl.l) * 0.55, 10);
+            }
+            hsl.s *= 0.7;
+            const newRgba = color.hsl2Rgb(hsl);
+            node.styles.set('borderColor', `rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${rgba.a || 1})`);
+        }
+        node.styles.set('backgroundColor', formatValue);
+    }
+});
+const cellBackgroundAttrLoader = {
+    match(element) {
+        return (element.tagName === 'TD' || element.tagName === 'TH') && !!element.style.backgroundColor;
+    },
+    read(element) {
+        return {
+            attribute: cellBackgroundAttr,
+            value: element.style.backgroundColor
+        };
+    }
+};
+
+function CellBackgroundTool() {
+    const refreshService = core.inject(exports.RefreshService);
+    const selection = core.inject(core$1.Selection);
+    const [viewModel, update] = hooks.useProduce({
+        highlight: false,
+        disabled: false,
+    });
+    function setColor(picker) {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            const slots = commonAncestorComponent.getSelectedNormalizedSlots();
+            if (slots) {
+                slots.map(i => {
+                    return i.cells.filter(t => t.visible).map(i => i.raw.slot);
+                }).flat().forEach(slot => {
+                    const rgba = picker.rgba;
+                    if (rgba) {
+                        slot.setAttribute(cellBackgroundAttr, `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`);
+                    }
+                    else {
+                        slot.removeAttribute(cellBackgroundAttr);
+                    }
+                });
+            }
+        }
+        else {
+            let parentSlot = selection.commonAncestorSlot;
+            while (parentSlot) {
+                if (parentSlot.parent instanceof TableComponent) {
+                    const rgba = picker.rgba;
+                    if (rgba) {
+                        parentSlot.setAttribute(cellBackgroundAttr, `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`);
+                    }
+                    else {
+                        parentSlot.removeAttribute(cellBackgroundAttr);
+                    }
+                    return;
+                }
+                parentSlot = parentSlot.parentSlot;
+            }
+        }
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        update(draft => {
+            draft.disabled = !isInTable(selection);
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return (jsxRuntime.jsx(Dropdown, { width: '177px', menu: jsxRuntime.jsx(ColorPicker, { onSelected: setColor }), trigger: 'hover', children: jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) }) }));
+    };
+}
+
+function MergeCellsTool() {
+    const refreshService = core.inject(exports.RefreshService);
+    const selection = core.inject(core$1.Selection);
+    const [viewModel, update] = hooks.useProduce({
+        highlight: false,
+        disabled: false,
+    });
+    function merge() {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            commonAncestorComponent.mergeCellBySelection();
+        }
+    }
+    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;
                 }
-                break;
-            case 'step':
-                {
-                    const step = new StepComponent(textbus, {
-                        step: 0,
-                        items: [createStepItem(textbus)]
-                    });
-                    insertComponent(step);
-                    selection.selectFirstPosition(step, false, true);
+            }
+            draft.disabled = true;
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, 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({
+        highlight: false,
+        disabled: false,
+    });
+    function split() {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            commonAncestorComponent.splitCellsBySelection();
+            return;
+        }
+        let parentSlot = selection.commonAncestorSlot;
+        while (parentSlot) {
+            if (parentSlot.parent instanceof TableComponent) {
+                if (parentSlot.parent === commonAncestorComponent) {
+                    parentSlot.parent.splitCellsBySelection();
+                    return;
                 }
-                break;
-            case 'timeline': {
-                const timeline = new TimelineComponent(textbus, {
-                    items: [createTimelineItem(textbus, '#296eff')]
-                });
-                insertComponent(timeline);
-                selection.selectFirstPosition(timeline, false, true);
-                break;
+                parentSlot.parent.splitCellBySlot(parentSlot);
+                return;
             }
+            parentSlot = parentSlot.parentSlot;
         }
     }
-    return scopedCss.withScopedCSS(scopedId$9, () => {
-        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.hideTitle ? null : jsxRuntime.jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: () => insert('table'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('image'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('video'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('katex'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('step'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-step" }), children: "\u6B65\u9AA4\u6761" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('timeline'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-timeline" }), children: "\u65F6\u95F4\u8F74" })] });
+    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;
+                            }
+                        }
+                    }
+                }
+            }
+            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;
+                                }
+                            }
+                        }
+                    }
+                    parentSlot = parentSlot.parentSlot;
+                }
+            }
+            draft.disabled = true;
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-split-cells" }) });
+    };
+}
+
+var scopedId$b = "vf-669084";
+
+function SplitLine() {
+    return scopedCss.withScopedCSS(scopedId$b, () => {
+        return jsxRuntime.jsx("div", { class: "split-line" });
     });
 }
 
-var scopedId$8 = "vf-b05292";
+var scopedId$a = "vf-b05292";
 
 const LeftToolbar = core.withAnnotation({
-    providers: [exports.RefreshService]
+    providers: [exports.RefreshService, ToolService]
 }, function LeftToolbar() {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const textbus = core.inject(core$1.Textbus);
@@ -5116,7 +5472,7 @@ const LeftToolbar = core.withAnnotation({
     function changeIgnoreMove(b) {
         isIgnoreMove = b;
     }
-    return scopedCss.withScopedCSS(scopedId$8, () => {
+    return scopedCss.withScopedCSS(scopedId$a, () => {
         var _a;
         const position = positionSignal();
         const slot = activeSlot();
@@ -5156,9 +5512,9 @@ const LeftToolbar = core.withAnnotation({
                         right: 0,
                         top: 0
                     }, menu: isEmptyBlock() ?
-                        jsxRuntime.jsx(InsertTool, { replace: !needInsert, slot: activeSlot() })
+                        jsxRuntime.jsx(InsertMenu, { replace: !needInsert, slot: activeSlot() })
                         :
-                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertTool, { hideTitle: true, slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
+                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertMenu, { hideTitle: true, slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
                             jsxRuntime.jsx("span", { children: jsxRuntime.jsx("i", { class: "xnote-icon-plus" }) })
                             :
                                 jsxRuntime.jsxs("span", { children: [activeNode, jsxRuntime.jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -5193,7 +5549,7 @@ class LeftToolbarPlugin {
     }
 }
 
-var scopedId$7 = "vf-3073ba";
+var scopedId$9 = "vf-3073ba";
 
 function LinkJump() {
     const selection = core.inject(core$1.Selection);
@@ -5247,25 +5603,26 @@ function LinkJump() {
             }
         });
     }
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$7, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$9, () => {
         return (jsxRuntime.jsxs("div", { ref: ref, class: "link-jump-plugin", style: { display: isShow() ? '' : 'none' }, children: [jsxRuntime.jsx("span", { onClick: cleanLink, children: "\u6E05\u9664" }), jsxRuntime.jsx("a", { target: "_blank", href: href(), children: "\u8DF3\u8F6C" })] }));
     }), container);
 }
 
-var scopedId$6 = "vf-fee98b";
+var scopedId$8 = "vf-33b3ca";
 
 function sum(numbers) {
     return numbers.reduce((a, b) => a + b, 0);
 }
 
-const Toolbar = core.withAnnotation({
-    providers: [exports.RefreshService]
-}, function Toolbar() {
+const InlineToolbar = core.withAnnotation({
+    providers: [exports.RefreshService, ToolService]
+}, function Toolbar(props) {
     const selection = core.inject(core$1.Selection);
     const viewDocument = core.inject(platformBrowser.VIEW_CONTAINER);
     const rootComponentRef = core.inject(core$1.RootComponentRef);
     const adapter = core.inject(platformBrowser.DomAdapter);
     const bridge = core.inject(platformBrowser.SelectionBridge);
+    const query = core.inject(core$1.Query);
     const textbus = core.inject(core$1.Textbus);
     const editorService = core.inject(exports.EditorService);
     const refreshService = core.inject(exports.RefreshService);
@@ -5388,28 +5745,29 @@ const Toolbar = core.withAnnotation({
         mousedownSubscription.unsubscribe();
         mouseupSubscription.unsubscribe();
     });
-    return scopedCss.withScopedCSS(scopedId$6, () => {
+    return scopedCss.withScopedCSS(scopedId$8, () => {
         const p = viewPosition();
-        return (jsxRuntime.jsxs("div", { class: "toolbar", ref: toolbarRef, style: {
+        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,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: p.transitionDuration + 's'
-            }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxRuntime.jsxs(core.Fragment, { children: [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"), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), 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(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) })] }));
+            }, 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(ColorTool, {}) }), 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")] }));
     });
 });
 
-class ToolbarPlugin {
-    constructor() {
+class InlineToolbarPlugin {
+    constructor(config = {}) {
+        this.config = config;
         this.app = null;
     }
     setup(injector) {
-        const App = function () {
+        const App = () => {
             const readonly = useReadonly();
             return () => {
-                return readonly() ? null : jsxRuntime.jsx(Toolbar, {});
+                return readonly() ? null : jsxRuntime.jsx(InlineToolbar, { theme: this.config.theme });
             };
         };
         this.app = platformBrowser$1.createApp(jsxRuntime.jsx(App, {}), {
@@ -5426,6 +5784,133 @@ class ToolbarPlugin {
     }
 }
 
+var scopedId$7 = "vf-42c12d";
+
+const StaticToolbar = core.withAnnotation({
+    providers: [exports.RefreshService, ToolService]
+}, function Toolbar(props) {
+    const selection = core.inject(core$1.Selection);
+    const textbus = core.inject(core$1.Textbus);
+    const query = core.inject(core$1.Query);
+    const refreshService = core.inject(exports.RefreshService);
+    const instance = core.getCurrentInstance();
+    const subscription = core$1.merge(textbus.onChange, selection.onChange).pipe(core$1.debounceTime(20)).subscribe(() => {
+        refreshService.onRefresh.next();
+        instance.markAsDirtied();
+    });
+    core.onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    return scopedCss.withScopedCSS(scopedId$7, () => {
+        return (jsxRuntime.jsxs("div", { class: ['toolbar', props.theme], 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(ColorTool, {}) }), 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")] }));
+    });
+});
+
+class StaticToolbarPlugin {
+    constructor(options) {
+        this.options = options;
+        this.app = null;
+        this.container = null;
+    }
+    setup(injector) {
+        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 }) }), {
+            context: injector
+        });
+        this.options.host.appendChild(container);
+        this.container = container;
+        this.app.mount(container);
+    }
+    onDestroy() {
+        var _a, _b;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = this.app) === null || _b === void 0 ? void 0 : _b.destroy();
+    }
+}
+
+var scopedId$6 = "vf-25fd9c";
+
+const SuspensionToolbar = core.withAnnotation({
+    providers: [exports.RefreshService, ToolService]
+}, function Toolbar(props) {
+    const selection = core.inject(core$1.Selection);
+    const textbus = core.inject(core$1.Textbus);
+    const query = core.inject(core$1.Query);
+    const refreshService = core.inject(exports.RefreshService);
+    const viewDocument = core.inject(platformBrowser.VIEW_CONTAINER);
+    const instance = core.getCurrentInstance();
+    const subscription = core$1.merge(textbus.onChange, selection.onChange).pipe(core$1.debounceTime(20)).subscribe(() => {
+        refreshService.onRefresh.next();
+        instance.markAsDirtied();
+    });
+    core.onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    const [styles, updateStyles] = hooks.useProduce({
+        top: 0,
+        opacity: 1,
+    });
+    subscription.add(core$1.fromEvent(document, 'scroll').pipe(core$1.tap(() => {
+        updateStyles(draft => {
+            draft.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);
+            });
+        }
+        else {
+            updateStyles(draft => {
+                draft.top = 0;
+            });
+        }
+    }), core$1.delay(100)).subscribe(() => {
+        updateStyles(draft => {
+            draft.opacity = 1;
+        });
+    }));
+    return scopedCss.withScopedCSS(scopedId$6, () => {
+        const s = styles();
+        return (jsxRuntime.jsxs("div", { class: ['toolbar', props.theme, {
+                    suspension: s.top === 0 ? '' : 'suspension'
+                }], style: {
+                top: s.top + 'px',
+                opacity: s.opacity,
+                pointerEvents: s.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(ColorTool, {}) }), 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")] }));
+    });
+});
+
+class SuspensionToolbarPlugin {
+    constructor(options = {}) {
+        this.options = options;
+        this.app = null;
+        this.container = null;
+    }
+    setup(injector) {
+        const host = injector.get(platformBrowser.VIEW_CONTAINER);
+        const container = document.createElement('div');
+        this.app = platformBrowser$1.createApp(jsxRuntime.jsx(SuspensionToolbar, { theme: this.options.theme }), {
+            context: injector
+        });
+        host.prepend(container);
+        this.container = container;
+        this.app.mount(container);
+    }
+    onDestroy() {
+        var _a, _b;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = this.app) === null || _b === void 0 ? void 0 : _b.destroy();
+    }
+}
+
 class Matcher {
     constructor(target, rule) {
         this.target = target;
@@ -5523,9 +6008,16 @@ class Matcher {
     }
 }
 
+/**
+ * 组件架构信息
+ */
 class Organization {
 }
 function registerAtShortcut(textbus) {
+    const organization = textbus.get(Organization, null);
+    if (!organization) {
+        return;
+    }
     const keyboard = textbus.get(core$1.Keyboard);
     const selection = textbus.get(core$1.Selection);
     const commander = textbus.get(core$1.Commander);
@@ -5568,6 +6060,8 @@ class AtComponent extends core$1.Component {
         this.focus = new core$1.Subject();
         this.members = core.createSignal([]);
         this.selectedIndex = core.createSignal(0);
+        this.selection = this.textbus.get(core$1.Selection);
+        this.organization = this.textbus.get(Organization);
     }
     getSlots() {
         if (this.state.userInfo) {
@@ -5621,10 +6115,7 @@ class AtComponent extends core$1.Component {
         });
         core$1.onBreak((ev) => {
             const member = this.members()[this.selectedIndex()];
-            if (member) {
-                this.state.userInfo = Object.assign({}, member);
-            }
-            selection.selectComponentEnd(this);
+            this.atMember(member);
             ev.preventDefault();
         });
         core$1.useDynamicShortcut({
@@ -5660,12 +6151,18 @@ class AtComponent extends core$1.Component {
             subs.unsubscribe();
         });
     }
+    atMember(member) {
+        if (member) {
+            this.state.userInfo = Object.assign({}, member);
+            this.organization.atMember(member);
+        }
+        this.selection.selectComponentEnd(this);
+    }
 }
 AtComponent.componentName = 'AtComponent';
 AtComponent.type = core$1.ContentType.InlineComponent;
 
 function AtComponentView(props) {
-    const selection = core.inject(core$1.Selection);
     const dropdownRef = core.createRef();
     const subscription = props.component.focus.subscribe((b) => {
         if (dropdownRef.current && props.component.members().length) {
@@ -5717,8 +6214,7 @@ function AtComponentView(props) {
                         const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
                         const color$1 = yiq >= 128 ? '#000' : '#fff';
                         return (jsxRuntime.jsxs("div", { onClick: () => {
-                                props.component.state.userInfo = member;
-                                selection.selectComponentEnd(props.component);
+                                props.component.atMember(member);
                             }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsxRuntime.jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsxRuntime.jsx("img", { src: member.avatar, alt: member.name }) :
                                         jsxRuntime.jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color: color$1 }, children: member.name }) }), jsxRuntime.jsxs("div", { class: "xnote-at-member-info", children: [jsxRuntime.jsx("div", { class: "xnote-at-member-name", children: member.name }), jsxRuntime.jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
                     }) }), children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, tag: "span", class: "xnote-at-input" })] }) }));
@@ -5776,8 +6272,11 @@ class RootComponent extends core$1.Component {
             lastContent instanceof TodolistComponent) {
             return;
         }
+        const selection = this.textbus.get(core$1.Selection);
         content.retain(content.length);
-        content.insert(new ParagraphComponent(this.textbus));
+        const newParagraph = new ParagraphComponent(this.textbus);
+        content.insert(newParagraph);
+        selection.setPosition(newParagraph.state.slot, 0);
     }
 }
 RootComponent.componentName = 'RootComponent';
@@ -5792,14 +6291,22 @@ function RootView(props) {
             sub.unsubscribe();
         };
     });
-    core.onUpdated(() => {
-        props.component.afterCheck();
-    });
+    const containerRef = core.createRef();
     const readonly = useReadonly();
     const output = useOutput();
+    function checkContent(ev) {
+        if (ev.target === containerRef.current) {
+            const rect = containerRef.current.getBoundingClientRect();
+            if (rect.bottom - ev.clientY < 40) {
+                props.component.afterCheck();
+            }
+        }
+    }
     return () => {
         const { rootRef } = props;
-        return (jsxRuntime.jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": props.component.name, children: jsxRuntime.jsx(SlotRender, { slot: content, tag: "div", class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
+        return (jsxRuntime.jsx("div", { class: "xnote-root", onClick: checkContent, style: !readonly() ? {
+                paddingBottom: '40px'
+            } : {}, dir: "auto", ref: [rootRef, containerRef, ref], "data-component": props.component.name, children: jsxRuntime.jsx(SlotRender, { slot: content, tag: "div", class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
     };
 }
 const rootComponentLoader = {
@@ -6757,7 +7264,7 @@ const stepComponentLoader = {
     }
 };
 
-class XNoteMessageBug extends collaborate.MessageBus {
+class XNoteMessageBus extends collaborate.MessageBus {
     constructor(selection, collaborateCursor, userinfo) {
         super();
         this.selection = selection;
@@ -6849,7 +7356,9 @@ class Editor extends core$1.Textbus {
                 italicFormatLoader,
                 linkFormatLoader,
                 strikeThroughFormatLoader,
-                underlineFormatLoader
+                underlineFormatLoader,
+                subscriptFormatLoader,
+                superscriptFormatLoader
             ], attributeLoaders: [
                 cellBackgroundAttrLoader,
                 cellAlignAttrLoader,
@@ -6865,9 +7374,9 @@ class Editor extends core$1.Textbus {
                         provide: platformBrowser.CollaborateSelectionAwarenessDelegate,
                         useClass: TableSelectionAwarenessDelegate
                     }, {
-                        provide: XNoteMessageBug,
+                        provide: XNoteMessageBus,
                         useFactory: (selection, collaborateCursor) => {
-                            return new XNoteMessageBug(selection, collaborateCursor, editorConfig.collaborateConfig.userinfo);
+                            return new XNoteMessageBus(selection, collaborateCursor, editorConfig.collaborateConfig.userinfo);
                         },
                         deps: [
                             core$1.Selection,
@@ -6875,7 +7384,7 @@ class Editor extends core$1.Textbus {
                         ]
                     }, {
                         provide: collaborate.MessageBus,
-                        useExisting: XNoteMessageBug
+                        useExisting: XNoteMessageBus
                     }]
             });
         }
@@ -6937,7 +7446,9 @@ class Editor extends core$1.Textbus {
                 italicFormatter,
                 linkFormatter,
                 strikeThroughFormatter,
-                underlineFormatter
+                underlineFormatter,
+                subscriptFormatter,
+                superscriptFormatter
             ], attributes: [
                 cellBackgroundAttr,
                 cellAlignAttr,
@@ -6946,7 +7457,7 @@ class Editor extends core$1.Textbus {
                 textIndentAttr
             ], plugins: [
                 new LeftToolbarPlugin(),
-                new ToolbarPlugin(),
+                new InlineToolbarPlugin()
             ], onAfterStartup(textbus) {
                 registerBoldShortcut(textbus);
                 registerCodeShortcut(textbus);
@@ -7010,6 +7521,7 @@ exports.BoldTool = BoldTool;
 exports.Button = Button;
 exports.CellAlignTool = CellAlignTool;
 exports.CellBackgroundTool = CellBackgroundTool;
+exports.CleanFormatsTool = CleanFormatsTool;
 exports.CodeTool = CodeTool;
 exports.ColorPicker = ColorPicker;
 exports.ColorTool = ColorTool;
@@ -7017,6 +7529,7 @@ exports.ComponentToolbar = ComponentToolbar;
 exports.Divider = Divider;
 exports.DragResize = DragResize;
 exports.Dropdown = Dropdown;
+exports.DropdownMenuContainer = DropdownMenuContainer;
 exports.DropdownMenuPortal = DropdownMenuPortal;
 exports.Editor = Editor;
 exports.FileUploader = FileUploader;
@@ -7026,6 +7539,9 @@ exports.HighlightBoxComponent = HighlightBoxComponent;
 exports.HighlightBoxView = HighlightBoxView;
 exports.ImageComponent = ImageComponent;
 exports.ImageView = ImageView;
+exports.InlineToolbar = InlineToolbar;
+exports.InlineToolbarPlugin = InlineToolbarPlugin;
+exports.InsertMenu = InsertMenu;
 exports.InsertTool = InsertTool;
 exports.ItalicTool = ItalicTool;
 exports.KatexComponent = KatexComponent;
@@ -7047,23 +7563,30 @@ exports.ParagraphComponent = ParagraphComponent;
 exports.ParagraphView = ParagraphView;
 exports.Picker = Picker;
 exports.Popup = Popup;
+exports.RedoTool = RedoTool;
 exports.RootComponent = RootComponent;
 exports.RootView = RootView;
 exports.SourceCodeComponent = SourceCodeComponent;
 exports.SourceCodeView = SourceCodeView;
 exports.SplitCellsTool = SplitCellsTool;
+exports.SplitLine = SplitLine;
+exports.StaticToolbar = StaticToolbar;
+exports.StaticToolbarPlugin = StaticToolbarPlugin;
 exports.StrikeThroughTool = StrikeThroughTool;
+exports.SubscriptTool = SubscriptTool;
+exports.SuperscriptTool = SuperscriptTool;
+exports.SuspensionToolbar = SuspensionToolbar;
+exports.SuspensionToolbarPlugin = SuspensionToolbarPlugin;
 exports.TableComponent = TableComponent;
 exports.TableComponentView = TableComponentView;
 exports.TodolistComponent = TodolistComponent;
 exports.TodolistView = TodolistView;
-exports.Toolbar = Toolbar;
 exports.ToolbarItem = ToolbarItem;
-exports.ToolbarPlugin = ToolbarPlugin;
 exports.UnderlineTool = UnderlineTool;
+exports.UndoTool = UndoTool;
 exports.VideoComponent = VideoComponent;
 exports.VideoView = VideoView;
-exports.XNoteMessageBug = XNoteMessageBug;
+exports.XNoteMessageBus = XNoteMessageBus;
 exports.atComponentLoader = atComponentLoader;
 exports.backgroundColorFormatLoader = backgroundColorFormatLoader;
 exports.backgroundColorFormatter = backgroundColorFormatter;
@@ -7112,6 +7635,10 @@ exports.sourceCodeComponentLoader = sourceCodeComponentLoader;
 exports.sourceCodeThemes = sourceCodeThemes;
 exports.strikeThroughFormatLoader = strikeThroughFormatLoader;
 exports.strikeThroughFormatter = strikeThroughFormatter;
+exports.subscriptFormatLoader = subscriptFormatLoader;
+exports.subscriptFormatter = subscriptFormatter;
+exports.superscriptFormatLoader = superscriptFormatLoader;
+exports.superscriptFormatter = superscriptFormatter;
 exports.tableComponentLoader = tableComponentLoader;
 exports.textAlignAttr = textAlignAttr;
 exports.textAlignAttrLoader = textAlignAttrLoader;