@textbus/xnote 0.1.1 → 0.2.0

package/bundles/index.esm.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
-import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, watch } from '@viewfly/core';
-import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
+import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, InjectionToken, withAnnotation, onUpdated, onMounted, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, Context, watch } from '@viewfly/core';
+import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, onParentSlotUpdated, Textbus, History, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, throttleTime, delay, tap, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
 import { normalizeHex, hex2Hsl, hex2Rgb, hex2Hsv, hsl2Hex, hsl2Hsv, hsl2Rgb, rgb2Hsl, rgb2Hex, rgb2Hsv, hsv2Hex, hsv2Hsl, hsv2Rgb, any2Hsl, parseCss } from '@tanbo/color';
-import { VIEW_CONTAINER, isMac, DomAdapter, Input, SelectionBridge, BrowserModule, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, CollaborateCursor, Parser } from '@textbus/platform-browser';
+import { VIEW_CONTAINER, isMac, DomAdapter, Input, BrowserModule, SelectionBridge, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, CollaborateCursor, Parser } from '@textbus/platform-browser';
 import { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
 import { useProduce } from '@viewfly/hooks';
 import highlightjs from 'highlight.js';
@@ -12,7 +12,7 @@ import Katex from 'katex';
 import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
 import { MessageBus, CollaborateModule } from '@textbus/collaborate';
 
-var scopedId$o = "vf-d94b56";
+var scopedId$r = "vf-7d288d";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -145,7 +145,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$o, () => {
+    return withScopedCSS(scopedId$r, () => {
         return (jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -157,7 +157,7 @@ function Button(props) {
     });
 }
 
-var scopedId$n = "vf-d552b9";
+var scopedId$q = "vf-d552b9";
 
 class Picker {
     set hex(color) {
@@ -446,7 +446,7 @@ function ColorPicker(props) {
         props.onSelected(picker);
         addRecentColor();
     }
-    return withScopedCSS(scopedId$n, () => {
+    return withScopedCSS(scopedId$q, () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         return (jsxs("div", { onMousedown: ev => {
                 ev.stopPropagation();
@@ -497,10 +497,10 @@ function ColorPicker(props) {
     });
 }
 
-var scopedId$m = "vf-ac7e8d";
+var scopedId$p = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return withScopedCSS(scopedId$m, () => {
+    return withScopedCSS(scopedId$p, () => {
         return (jsx("div", { class: "component-toolbar", style: props.style, children: jsx("div", { class: [
                     'toolbar',
                     {
@@ -510,15 +510,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$l = "vf-ede279";
+var scopedId$o = "vf-ede279";
 
 function Divider() {
-    return withScopedCSS(scopedId$l, () => {
+    return withScopedCSS(scopedId$o, () => {
         return jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$k = "vf-d91ad6";
+var scopedId$n = "vf-d91ad6";
 
 function DragResize(props) {
     const isShow = createSignal(false);
@@ -627,24 +627,25 @@ function DragResize(props) {
         });
     }
     const sizeText = createSignal(`${component.state.width}*${component.state.height}`);
-    return withScopedCSS(scopedId$k, () => {
+    return withScopedCSS(scopedId$n, () => {
         return (jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsx("div", { class: "container", ref: ref, children: props.children }), jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsx("div", { class: "mask", ref: mask, children: sizeText() }), jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), 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 InjectionToken('DropdownMenuContainer');
 const DropdownMenuPortal = withAnnotation({
     providers: [
         DropdownService
     ]
 }, function DropdownMenuPortal(props) {
     const dropdownContextService = inject(DropdownContextService);
-    const container = inject(VIEW_CONTAINER);
+    const container = inject(DropdownMenuContainer, inject(VIEW_CONTAINER));
     const menuRef = createRef();
     let timer = null;
     const delay = 10;
@@ -731,8 +732,11 @@ const DropdownMenuPortal = withAnnotation({
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
-    return createPortal(withScopedCSS(scopedId$i, () => {
-        return (jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
+    function stopPropagation(ev) {
+        ev.stopPropagation();
+    }
+    return createPortal(withScopedCSS(scopedId$l, () => {
+        return (jsx("div", { onMouseenter: onEnter, onMousedown: stopPropagation, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsx("div", { class: "dropdown-menu-content", style: {
                     padding: props.padding
@@ -746,6 +750,9 @@ const Dropdown = withAnnotation({
     const isShow = createSignal(false);
     const dropdownContextService = inject(DropdownContextService);
     const toggle = () => {
+        if (props.disabled) {
+            return;
+        }
         if (dropdownContextService.isOpen) {
             dropdownContextService.hide(false);
         }
@@ -775,11 +782,17 @@ const Dropdown = withAnnotation({
         let leaveSub;
         const bindLeave = function () {
             leaveSub = fromEvent(dropdownRef.current, 'mouseleave').subscribe(() => {
+                if (props.disabled) {
+                    return;
+                }
                 dropdownContextService.hide();
             });
         };
         bindLeave();
         subscription.add(fromEvent(dropdownRef.current, 'mouseenter').subscribe(() => {
+            if (props.disabled) {
+                return;
+            }
             if (leaveSub) {
                 leaveSub.unsubscribe();
             }
@@ -799,7 +812,7 @@ const Dropdown = withAnnotation({
                 dropdownContextService.hide(false);
             }
         },
-        $render: withScopedCSS(scopedId$j, () => {
+        $render: withScopedCSS(scopedId$m, () => {
             return (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() &&
                         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 => {
@@ -816,7 +829,7 @@ const Dropdown = withAnnotation({
     };
 });
 
-var scopedId$h = "vf-c32a7b";
+var scopedId$k = "vf-c32a7b";
 
 function Keymap(props) {
     const arr = [];
@@ -850,20 +863,20 @@ function Keymap(props) {
             arr.push(jsx("span", { children: keymap.key }));
         }
     }
-    return withScopedCSS(scopedId$h, () => {
+    return withScopedCSS(scopedId$k, () => {
         return (jsx("span", { class: "keymap", children: arr }));
     });
 }
 
-var scopedId$g = "vf-acaa5f";
+var scopedId$j = "vf-acaa5f";
 
 function MenuHeading(props) {
-    return withScopedCSS(scopedId$g, () => {
+    return withScopedCSS(scopedId$j, () => {
         return (jsx("div", { class: "menu-heading", children: props.children }));
     });
 }
 
-var scopedId$f = "vf-c3b9dc";
+var scopedId$i = "vf-c3b9dc";
 
 function MenuItem(props) {
     const dropdownContextService = inject(DropdownContextService, null);
@@ -883,7 +896,7 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return withScopedCSS(scopedId$f, () => {
+    return withScopedCSS(scopedId$i, () => {
         return (jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxs("div", { class: "menu-item-content", children: [jsxs("div", { children: [props.icon && jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), jsx("div", { children: props.desc })] }), props.arrow ?
                     jsx("div", { class: "arrow", children: jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsx("div", { class: [
@@ -893,11 +906,11 @@ function MenuItem(props) {
     });
 }
 
-var scopedId$e = "vf-a23c47";
+var scopedId$h = "vf-a23c47";
 
 function Popup(props) {
     const host = inject(VIEW_CONTAINER);
-    return createPortal(withScopedCSS(scopedId$e, () => {
+    return createPortal(withScopedCSS(scopedId$h, () => {
         return (jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -905,15 +918,15 @@ function Popup(props) {
     }), host);
 }
 
-var scopedId$d = "vf-216815";
+var scopedId$g = "vf-cd4d99";
 
 function ToolbarItem(props) {
-    return withScopedCSS(scopedId$d, () => {
+    return withScopedCSS(scopedId$g, () => {
         return (jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var scopedId$c = "vf-2a8a65";
+var scopedId$f = "vf-2a8a65";
 
 let RefreshService = class RefreshService {
     constructor() {
@@ -1399,6 +1412,14 @@ class TimelineComponent extends Component {
     getSlots() {
         return this.state.items.map(i => i.slot);
     }
+    removeSlot(slot) {
+        const index = this.state.items.findIndex(i => i.slot === slot);
+        if (index >= 0) {
+            this.state.items.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
 }
 TimelineComponent.componentName = 'TimelineComponent';
 TimelineComponent.type = ContentType.BlockComponent;
@@ -1433,6 +1454,17 @@ class StepComponent extends Component {
     getSlots() {
         return this.state.items.map(i => i.slot);
     }
+    removeSlot(slot) {
+        const index = this.state.items.findIndex(i => i.slot === slot);
+        if (index >= 0) {
+            if (index === this.state.step) {
+                this.state.step--;
+            }
+            this.state.items.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
 }
 StepComponent.componentName = 'StepComponent';
 StepComponent.type = ContentType.BlockComponent;
@@ -2195,6 +2227,37 @@ function registerTextIndentShortcut(textbus) {
     });
 }
 
+let ToolService = class ToolService {
+    constructor(selection, controller) {
+        this.selection = selection;
+        this.controller = controller;
+        const [state, updateState] = useProduce({
+            inSourceCode: false,
+            readonly: controller.readonly
+        });
+        this.state = state;
+        this.sub = merge(selection.onChange, controller.onReadonlyStateChange).subscribe(() => {
+            updateState(draft => {
+                draft.readonly = controller.readonly;
+                draft.inSourceCode = selection.commonAncestorComponent instanceof SourceCodeComponent;
+            });
+        });
+    }
+    destroy() {
+        this.sub.unsubscribe();
+    }
+};
+ToolService = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [Selection,
+        Controller])
+], ToolService);
+
+function useCommonState() {
+    const toolService = inject(ToolService);
+    return toolService.state;
+}
+
 function AttrTool(props) {
     const commander = inject(Commander);
     const selection = inject(Selection);
@@ -2271,9 +2334,11 @@ function AttrTool(props) {
                 break;
         }
     }
-    return withScopedCSS(scopedId$c, () => {
+    const commonState = useCommonState();
+    return withScopedCSS(scopedId$f, () => {
         const states = checkStates();
-        return (jsx(Dropdown, { width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
+        const b = commonState().inSourceCode || commonState().readonly;
+        return (jsx(Dropdown, { disabled: b, width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
                     label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsx(Keymap, { keymap: { key: 'L', modKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
                     value: 't-l'
@@ -2296,7 +2361,7 @@ function AttrTool(props) {
                     label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: 'Tab', shiftKey: true } }), icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
                     value: 'i-'
                 }
-            ], children: props.children || jsx(Button, { arrow: true, highlight: false, children: jsx("span", { class: `xnote-icon-paragraph-${states.textAlign || 'left'} icon` }) }) }));
+            ], children: props.children || jsx(Button, { disabled: b, arrow: true, highlight: false, children: jsx("span", { class: `xnote-icon-paragraph-${states.textAlign || 'left'} icon` }) }) }));
     });
 }
 
@@ -2478,6 +2543,17 @@ class TableComponent extends 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;
@@ -3549,7 +3625,8 @@ function useBlockTransform() {
 function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
-    return withScopedCSS(scopedId$c, () => {
+    const commonState = useCommonState();
+    return withScopedCSS(scopedId$f, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -3573,7 +3650,8 @@ function BlockTool() {
                 break;
             }
         }
-        return (jsx(Dropdown, { width: 'auto', onCheck: transform, trigger: 'hover', menu: [
+        const b = commonState().inSourceCode || commonState().readonly;
+        return (jsx(Dropdown, { disabled: b, width: 'auto', onCheck: transform, trigger: 'hover', menu: [
                 {
                     label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-pilcrow" }), desc: jsx(Keymap, { keymap: {
                                 modKey: true,
@@ -3638,7 +3716,7 @@ function BlockTool() {
                     label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-hightlight-box" }), checked: states.highlightBox, children: "\u9AD8\u4EAE\u5757" }),
                     value: 'highlightBox'
                 }
-            ], children: jsx(Button, { arrow: true, highlight: false, children: jsx("span", { class: currentType }) }) }));
+            ], children: jsx(Button, { disabled: b, arrow: true, highlight: false, children: jsx("span", { class: currentType }) }) }));
     });
 }
 
@@ -3816,6 +3894,40 @@ const linkFormatLoader = {
     }
 };
 
+const subscriptFormatter = new Formatter('sub', {
+    render(children) {
+        return createVNode('sub', null, children);
+    }
+});
+const subscriptFormatLoader = {
+    match(element) {
+        return element.tagName === 'SUB';
+    },
+    read() {
+        return {
+            formatter: subscriptFormatter,
+            value: true
+        };
+    }
+};
+
+const superscriptFormatter = new Formatter('super', {
+    render(children) {
+        return createVNode('sup', null, children);
+    }
+});
+const superscriptFormatLoader = {
+    match(element) {
+        return element.tagName === 'SUP';
+    },
+    read() {
+        return {
+            formatter: superscriptFormatter,
+            value: true
+        };
+    }
+};
+
 const underlineFormatter = new Formatter('underline', {
     columned: true,
     render(children) {
@@ -3865,9 +3977,9 @@ function BoldTool() {
     const query = inject(Query);
     const textbus = inject(Textbus);
     const refreshService = inject(RefreshService);
+    const commonState = useCommonState();
     const [viewModel, update] = useProduce({
         highlight: false,
-        disabled: false,
     });
     function toggle() {
         toggleBold(textbus);
@@ -3883,7 +3995,20 @@ function BoldTool() {
     });
     return () => {
         const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsx("span", { class: "xnote-icon-bold" }) });
+        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly, onClick: toggle, children: jsx("span", { class: "xnote-icon-bold" }) });
+    };
+}
+
+function CleanFormatsTool() {
+    const commonState = useCommonState();
+    const commander = inject(Commander);
+    function clean() {
+        commander.cleanFormats([
+            linkFormatter
+        ]);
+    }
+    return () => {
+        return (jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly, onClick: clean, children: jsx("span", { class: "xnote-icon-clear-formatting" }) }));
     };
 }
 
@@ -3891,9 +4016,9 @@ function CodeTool() {
     const query = inject(Query);
     const refreshService = inject(RefreshService);
     const textbus = inject(Textbus);
+    const commonState = useCommonState();
     const [viewModel, update] = useProduce({
         highlight: false,
-        disabled: false,
     });
     function toggle() {
         toggleCode(textbus);
@@ -3909,11 +4034,11 @@ function CodeTool() {
     });
     return () => {
         const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsx("span", { class: "xnote-icon-code" }) });
+        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly, onClick: toggle, children: jsx("span", { class: "xnote-icon-code" }) });
     };
 }
 
-var scopedId$b = "vf-accb31";
+var scopedId$e = "vf-accb31";
 
 function ColorTool(props) {
     const query = inject(Query);
@@ -3924,7 +4049,6 @@ function ColorTool(props) {
     const backgroundColor = createSignal('');
     const [viewModel] = useProduce({
         highlight: false,
-        disabled: false,
     });
     function updateCheckState() {
         if (!props.slot && !selection.isSelected) {
@@ -3976,9 +4100,10 @@ function ColorTool(props) {
         '#90a0e5',
         '#c596e0',
     ];
-    return withScopedCSS(scopedId$b, () => {
+    const commonState = useCommonState();
+    return withScopedCSS(scopedId$e, () => {
         const vm = viewModel();
-        return (jsx(Dropdown, { style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxs("div", { children: [jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxs("div", { class: "text-colors", children: [jsx("div", { class: {
+        return (jsx(Dropdown, { disabled: commonState().readonly || commonState().inSourceCode, style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxs("div", { children: [jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxs("div", { class: "text-colors", children: [jsx("div", { class: {
                                     'no-background': true,
                                     active: textColor() === ''
                                 }, onClick: () => {
@@ -4008,7 +4133,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 || jsx(Button, { highlight: vm.highlight, arrow: true, disabled: vm.disabled, children: jsx("span", { class: "background", children: jsx("span", { style: {
+                            })] })] }), children: props.children || jsx(Button, { highlight: vm.highlight, arrow: true, disabled: commonState().readonly || commonState().inSourceCode, children: jsx("span", { class: "background", children: jsx("span", { style: {
                             backgroundColor: backgroundColor(),
                             color: textColor()
                         }, children: jsx("span", { class: "xnote-icon-color" }) }) }) }) }));
@@ -4108,16 +4233,18 @@ function FontFamilyTool() {
     onUnmounted(() => {
         subscription.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
         var _a;
-        return (jsx(Dropdown, { onCheck: check, menu: fontFamilyOptions.map(i => {
+        const b = commonState().inSourceCode || commonState().readonly;
+        return (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: jsx(MenuItem, { disabled: disabled, checked: currentFontFamily() === i.value, children: i.label }),
                     disabled,
                     value: i.value,
                 };
-            }), children: jsx(Button, { arrow: true, highlight: highlight(), children: ((_a = fontFamilyOptions.find(v => {
+            }), children: 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) || '默认' }) }));
     };
@@ -4162,776 +4289,1027 @@ function FontSizeTool() {
     onUnmounted(() => {
         subscription.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
-        return (jsx(Dropdown, { onCheck: check, menu: fontSizeOptions.map(i => {
+        const b = commonState().inSourceCode || commonState().readonly;
+        return (jsx(Dropdown, { disabled: b, onCheck: check, menu: fontSizeOptions.map(i => {
                 return {
                     label: jsx(MenuItem, { checked: currentFontSize() === i, children: i || '默认' }),
                     value: i
                 };
-            }), children: jsxs(Button, { arrow: true, highlight: highlight(), children: [jsx("span", { class: "xnote-icon-font-size" }), jsx("span", { children: currentFontSize() || '默认' })] }) }));
+            }), children: jsxs(Button, { disabled: b, arrow: true, highlight: highlight(), children: [jsx("span", { class: "xnote-icon-font-size" }), jsx("span", { children: currentFontSize() || '默认' })] }) }));
     };
 }
 
-function ItalicTool() {
-    const query = inject(Query);
-    const refreshService = inject(RefreshService);
-    const textbus = inject(Textbus);
-    const [viewModel, update] = useProduce({
-        highlight: false,
-        disabled: false,
-    });
-    function toggle() {
-        toggleItalic(textbus);
+var scopedId$d = "vf-cf8e1c";
+
+class FileUploader {
+}
+
+class ImageComponent extends Component {
+    static fromJSON(textbus, json) {
+        return new ImageComponent(textbus, Object.assign({}, json));
     }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const state = query.queryFormat(italicFormatter);
-        update(draft => {
-            draft.highlight = state.state === QueryStateType.Enabled;
-        });
-    });
-    onUnmounted(() => {
-        sub.unsubscribe();
-    });
+    getSlots() {
+        return [];
+    }
+}
+ImageComponent.type = ContentType.InlineComponent;
+ImageComponent.componentName = 'ImageComponent';
+function ImageView(props) {
+    const { name, state } = props.component;
+    const imageRef = createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsx("span", { class: "xnote-icon-italic" }) });
+        if (readonly() || output()) {
+            return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx("img", { alt: "", src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx(DragResize, { source: imageRef, component: props.component, children: jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }) }));
     };
 }
-
-var scopedId$a = "vf-e74208";
-
-let EditorService = class EditorService {
-    constructor() {
-        this.hideInlineToolbar = false;
-        this.canShowLeftToolbar = true;
-        this.onLeftToolbarCanVisibleChange = new Subject();
-    }
-    changeLeftToolbarVisible(b) {
-        this.canShowLeftToolbar = b;
-        this.onLeftToolbarCanVisibleChange.next();
+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'
+        });
     }
 };
-EditorService = __decorate([
-    Injectable({
-        provideIn: 'root'
-    })
-], EditorService);
 
-function LinkTool(props) {
-    const selectionBridge = inject(SelectionBridge);
-    const selection = inject(Selection);
-    const commander = inject(Commander);
-    const editorService = inject(EditorService);
-    const container = inject(VIEW_CONTAINER);
-    const isShow = createSignal(false);
-    const value = createSignal('');
-    function setLink(ev) {
-        ev.preventDefault();
-        commander.applyFormat(linkFormatter, {
-            href: value(),
-            target: '_blanK'
-        });
-        isShow.set(false);
+class VideoComponent extends Component {
+    static fromJSON(textbus, json) {
+        return new VideoComponent(textbus, Object.assign({}, json));
     }
-    let isClickFromSelf = false;
-    const sub = fromEvent(document, 'click').subscribe(() => {
-        if (isClickFromSelf) {
-            isClickFromSelf = false;
-            return;
-        }
-        editorService.hideInlineToolbar = false;
-        isShow.set(false);
-    });
-    onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return withScopedCSS(scopedId$a, () => {
-        const containerRect = container.getBoundingClientRect();
-        const rect = isShow() ? selectionBridge.getRect({
-            slot: selection.focusSlot,
-            offset: selection.focusOffset
-        }) : {};
-        return (jsxs("span", { children: [jsx(Button, { onClick: () => {
-                        var _a;
-                        isShow.set(true);
-                        isClickFromSelf = true;
-                        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
-                    }, children: jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
-                    jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxs("form", { onSubmit: setLink, onClick: () => {
-                                isClickFromSelf = true;
-                            }, class: "input-group", children: [jsx("input", { onChange: ev => {
-                                        value.set(ev.target.value);
-                                    }, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
-    });
-}
-
-function StrikeThroughTool() {
-    const query = inject(Query);
-    const refreshService = inject(RefreshService);
-    const textbus = inject(Textbus);
-    const [viewModel, update] = useProduce({
-        highlight: false,
-        disabled: false,
-    });
-    function toggle() {
-        toggleStrikeThrough(textbus);
+    getSlots() {
+        return [];
     }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const state = query.queryFormat(strikeThroughFormatter);
-        update(draft => {
-            draft.highlight = state.state === QueryStateType.Enabled;
-        });
-    });
-    onUnmounted(() => {
-        sub.unsubscribe();
-    });
+}
+VideoComponent.type = ContentType.InlineComponent;
+VideoComponent.componentName = 'VideoComponent';
+function VideoView(props) {
+    const { name, state } = props.component;
+    const videoRef = createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsx("span", { class: "xnote-icon-strikethrough" }) });
+        if (readonly() || output()) {
+            return (jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsx(DragResize, { source: videoRef, component: props.component, children: jsx("video", { ref: videoRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }) }));
     };
 }
-
-function UnderlineTool() {
-    const query = inject(Query);
-    const refreshService = inject(RefreshService);
-    const textbus = inject(Textbus);
-    const [viewModel, update] = useProduce({
-        highlight: false,
-        disabled: false,
-    });
-    function toggle() {
-        toggleUnderline(textbus);
+const videoComponentLoader = {
+    match(element) {
+        return element.tagName === 'VIDEO' || element.dataset.component === VideoComponent.componentName;
+    },
+    read(element, textbus) {
+        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
+        return new VideoComponent(textbus, {
+            src: video.src,
+            width: video.style.width || 'auto',
+            height: video.style.height || 'auto'
+        });
     }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const state = query.queryFormat(underlineFormatter);
-        update(draft => {
-            draft.highlight = state.state === QueryStateType.Enabled;
+};
+
+class KatexEditor extends Textbus {
+    constructor() {
+        const adapter = new ViewflyAdapter({
+            [SourceCodeComponent.componentName]: SourceCodeView
+        }, (host, root, injector) => {
+            const appInjector = new ReflectiveInjector(injector, [{
+                    provide: OutputInjectionToken,
+                    useValue: true
+                }]);
+            const app = createApp(root, {
+                context: appInjector
+            }).mount(host);
+            return () => {
+                app.destroy();
+            };
         });
-    });
-    onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsx("span", { class: "xnote-icon-underline" }) });
-    };
+        const browserModule = new BrowserModule({
+            adapter,
+            renderTo: () => {
+                return this.host;
+            }
+        });
+        super({
+            components: [
+                SourceCodeComponent
+            ],
+            imports: [browserModule]
+        });
+        this.onValueChange = new Subject();
+    }
+    mount(host, code) {
+        this.host = host;
+        const model = new SourceCodeComponent(this, {
+            lineNumber: true,
+            autoBreak: true,
+            lang: 'latex',
+            theme: 'github',
+            slots: code.split('\n').map(i => {
+                const slot = new Slot([ContentType.Text]);
+                slot.insert(i);
+                return {
+                    slot,
+                    emphasize: false
+                };
+            })
+        });
+        this.onChange.subscribe(() => {
+            const str = model.state.slots.map(i => {
+                if (i.slot.isEmpty) {
+                    return '';
+                }
+                return i.slot.toString();
+            }).join('\n');
+            this.onValueChange.next(str);
+        });
+        return this.render(model);
+    }
 }
 
-const cellAlignAttr = new Attribute('cellAlign', {
-    render(node, formatValue) {
-        node.styles.set('verticalAlign', formatValue);
+class KatexComponent extends Component {
+    static fromJSON(textbus, state) {
+        return new KatexComponent(textbus, state);
     }
-});
-const cellAlignAttrLoader = {
-    match(element) {
-        return element instanceof HTMLTableCellElement && !!element.style.verticalAlign;
-    },
-    read(element) {
-        return {
-            attribute: cellAlignAttr,
-            value: element.style.verticalAlign
-        };
+    constructor(textbus, state = {
+        text: '% \\f is defined as #1f(#2) using the macro\n' +
+            '\\f\\relax{x} = \\int_{-\\infty}^\\infty\n' +
+            '\\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n' +
+            '\\,d\\xi'
+    }) {
+        super(textbus, state);
     }
-};
-
-function CellAlignTool() {
-    const currentValue = createSignal('');
-    const selection = inject(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);
-                    }
-                });
+    getSlots() {
+        return [];
+    }
+}
+KatexComponent.componentName = 'KatexComponent';
+KatexComponent.type = ContentType.InlineComponent;
+function domToVDom(el) {
+    const attrs = {};
+    el.getAttributeNames().forEach(key => {
+        attrs[key] = el.getAttribute(key);
+    });
+    attrs.children = Array.from(el.childNodes).map(child => {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+            return domToVDom(child);
+        }
+        return child.textContent || '';
+    });
+    return jsx$1(el.tagName.toLowerCase(), attrs);
+}
+function KatexComponentView(props) {
+    function toDOM(value) {
+        let htmlString;
+        try {
+            htmlString = Katex.renderToString(value, {
+                displayMode: true,
+                leqno: false,
+                fleqn: false,
+                throwOnError: true,
+                errorColor: '#cc0000',
+                strict: 'warn',
+                output: 'html',
+                trust: false,
+                macros: { '\\f': '#1f(#2)' }
             });
         }
+        catch (e) {
+            htmlString = '<span style="color: red">公式错误</span>';
+        }
+        return new DOMParser().parseFromString(htmlString, 'text/html').body.children[0];
     }
-    const refreshService = inject(RefreshService);
-    const query = inject(Query);
-    const highlight = createSignal(false);
-    const subscription = refreshService.onRefresh.subscribe(() => {
-        const result = query.queryAttribute(cellAlignAttr);
-        const isHighlight = result.state === QueryStateType.Enabled;
-        highlight.set(isHighlight);
-        currentValue.set(isHighlight ? result.value : 'middle');
-    });
-    onUnmounted(() => {
-        subscription.unsubscribe();
+    const selection = inject(Textbus);
+    const editorRef = createDynamicRef(node => {
+        const editor = new KatexEditor();
+        editor.mount(node, props.component.state.text).then(() => {
+            editor.focus();
+        });
+        selection.blur();
+        const subscription = editor.onValueChange.subscribe((value) => {
+            props.component.state.text = value;
+        }).add(fromEvent(node, 'mousedown').subscribe(ev => ev.stopPropagation()), fromEvent(document, 'mousedown').subscribe(() => {
+            var _a;
+            (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
+        }));
+        return () => {
+            subscription.unsubscribe();
+            editor.destroy();
+        };
     });
+    const dropdownRef = createRef();
+    const output = useOutput();
+    const readonly = useReadonly();
     return () => {
-        return (jsx(Dropdown, { onCheck: check, menu: [
-                {
-                    label: jsx(MenuItem, { checked: currentValue() === 'top', icon: jsx("span", { class: "xnote-icon-align-top" }), children: "\u9876\u90E8\u5BF9\u9F50" }),
-                    value: 'top'
-                },
-                {
-                    label: jsx(MenuItem, { checked: currentValue() === 'middle', icon: jsx("span", { class: "xnote-icon-align-middle" }), children: "\u5782\u76F4\u5C45\u4E2D" }),
-                    value: 'middle'
-                },
-                {
-                    label: jsx(MenuItem, { checked: currentValue() === 'bottom', icon: jsx("span", { class: "xnote-icon-align-bottom" }), children: "\u5E95\u90E8\u5BF9\u9F50" }),
-                    value: 'bottom'
-                }
-            ], children: jsx(Button, { arrow: true, highlight: highlight(), children: jsx("span", { class: 'xnote-icon-align-' + (currentValue() || 'middle') }) }) }));
+        const text = props.component.state.text;
+        return (jsx("span", { onClick: () => {
+                var _a;
+                (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(true);
+            }, ref: props.rootRef, "data-component": KatexComponent.componentName, "data-katex": encodeURIComponent(text), class: "xnote-katex", children: (output() || readonly()) ?
+                domToVDom(toDOM(text))
+                :
+                    jsx(Dropdown, { padding: '0', ref: dropdownRef, trigger: 'none', width: '600px', menu: jsx("div", { class: "xnote-katex-input", ref: editorRef }), children: domToVDom(toDOM(text)) }) }));
     };
 }
-
-const cellBackgroundAttr = new Attribute('cellBackground', {
-    render(node, formatValue) {
-        const rgba = parseCss(formatValue);
-        if (rgba) {
-            const hsl = 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 = hsl2Rgb(hsl);
-            node.styles.set('borderColor', `rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${rgba.a || 1})`);
-        }
-        node.styles.set('backgroundColor', formatValue);
-    }
-});
-const cellBackgroundAttrLoader = {
+const katexComponentLoader = {
     match(element) {
-        return (element.tagName === 'TD' || element.tagName === 'TH') && !!element.style.backgroundColor;
+        return element.dataset.component === KatexComponent.componentName;
     },
-    read(element) {
-        return {
-            attribute: cellBackgroundAttr,
-            value: element.style.backgroundColor
-        };
+    read(element, textbus) {
+        const value = element.dataset.katex || '';
+        return new KatexComponent(textbus, {
+            text: decodeURIComponent(value)
+        });
     }
 };
 
-function CellBackgroundTool() {
-    const refreshService = inject(RefreshService);
+function InsertMenu(props) {
+    const commander = inject(Commander);
     const selection = inject(Selection);
-    const [viewModel, update] = 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 textbus = inject(Textbus);
+    const fileUploader = inject(FileUploader, null);
+    const dropdownContextService = inject(DropdownContextService);
+    function insert(type) {
+        var _a;
+        const component = (_a = props.slot) === null || _a === void 0 ? void 0 : _a.parent;
+        if (!component) {
+            return;
+        }
+        function insertComponent(comp) {
+            if (props.replace) {
+                commander.replaceComponent(component, comp);
+            }
+            else {
+                commander.insertAfter(comp, component);
+            }
+            dropdownContextService.canHide = true;
+            dropdownContextService.hide(false);
+        }
+        switch (type) {
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'paragraph':
+                {
+                    const slot = new Slot([
+                        ContentType.InlineComponent,
+                        ContentType.Text
+                    ]);
+                    if (/h[1-6]/.test(type)) {
+                        slot.setAttribute(headingAttr, type);
                     }
+                    const p = new ParagraphComponent(textbus, {
+                        slot
+                    });
+                    insertComponent(p);
+                    selection.setPosition(slot, 0);
+                }
+                break;
+            case 'ol':
+            case 'ul':
+                {
+                    const slot = new Slot([
+                        ContentType.InlineComponent,
+                        ContentType.Text
+                    ]);
+                    const list = new ListComponent(textbus, {
+                        slot,
+                        reorder: true,
+                        type: type === 'ol' ? 'OrderedList' : 'UnorderedList'
+                    });
+                    insertComponent(list);
+                    selection.setPosition(slot, 0);
+                }
+                break;
+            case 'sourceCode':
+                {
+                    const slot = new Slot([
+                        ContentType.Text
+                    ]);
+                    const comp = new SourceCodeComponent(textbus, {
+                        lang: '',
+                        lineNumber: true,
+                        slots: [{
+                                slot,
+                                emphasize: false
+                            }]
+                    });
+                    insertComponent(comp);
+                    selection.setPosition(slot, 0);
+                }
+                break;
+            case 'table':
+                {
+                    const table = new TableComponent(textbus);
+                    insertComponent(table);
+                    textbus.nextTick(() => {
+                        selection.selectFirstPosition(table, true, true);
+                    });
+                }
+                break;
+            case 'todolist':
+                {
+                    const slot = new Slot([
+                        ContentType.Text,
+                        ContentType.InlineComponent
+                    ]);
+                    const comp = new TodolistComponent(textbus, {
+                        slot,
+                        checked: false
+                    });
+                    insertComponent(comp);
+                    selection.setPosition(slot, 0);
+                }
+                break;
+            case 'image':
+                if (fileUploader) {
+                    Promise.resolve().then(() => fileUploader.uploadFile('image')).then(url => {
+                        const img = new ImageComponent(textbus, {
+                            src: url
+                        });
+                        commander.insert(img);
+                    });
+                }
+                break;
+            case 'video':
+                if (fileUploader) {
+                    Promise.resolve().then(() => fileUploader.uploadFile('video')).then(url => {
+                        const img = new VideoComponent(textbus, {
+                            src: url
+                        });
+                        commander.insert(img);
+                    });
+                }
+                break;
+            case 'highlightBox':
+                {
+                    const p = new ParagraphComponent(textbus);
+                    const comp = new HighlightBoxComponent(textbus);
+                    comp.state.slot.insert(p);
+                    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 '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;
             }
         }
     }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const commonAncestorComponent = selection.commonAncestorComponent;
-        update(draft => {
-            draft.disabled = !(commonAncestorComponent instanceof TableComponent);
-        });
-    });
-    onUnmounted(() => {
-        sub.unsubscribe();
+    return withScopedCSS(scopedId$d, () => {
+        return jsxs(Fragment, { children: [props.hideTitle ? null : jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsx("span", { class: "xnote-icon-heading-h5" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsx("span", { class: "xnote-icon-heading-h6" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(MenuItem, { onClick: () => insert('table'), icon: jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsx(MenuItem, { onClick: () => insert('image'), icon: jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsx(MenuItem, { onClick: () => insert('video'), icon: jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsx(MenuItem, { onClick: () => insert('katex'), icon: jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" }), jsx(MenuItem, { onClick: () => insert('step'), icon: jsx("span", { class: "xnote-icon-step" }), children: "\u6B65\u9AA4\u6761" }), jsx(MenuItem, { onClick: () => insert('timeline'), icon: jsx("span", { class: "xnote-icon-timeline" }), children: "\u65F6\u95F4\u8F74" })] });
     });
-    return () => {
-        const vm = viewModel();
-        return (jsx(Dropdown, { width: '177px', menu: jsx(ColorPicker, { onSelected: setColor }), trigger: 'hover', children: jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, children: jsx("span", { class: "xnote-icon-palette" }) }) }));
-    };
 }
 
-function MergeCellsTool() {
-    const refreshService = inject(RefreshService);
+function InsertTool() {
     const selection = inject(Selection);
-    const [viewModel, update] = 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);
-        });
+    const instance = getCurrentInstance();
+    const sub = selection.onChange.subscribe(() => {
+        instance.markAsDirtied();
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
-        const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: merge, children: jsx("span", { class: "xnote-icon-merge-cells" }) });
+        const b = commonState().readonly;
+        return (jsx(Dropdown, { disabled: b, menu: jsx(InsertMenu, { replace: false, hideTitle: true, slot: selection.focusSlot }), children: jsx(Button, { disabled: b, arrow: true, children: "\u63D2\u5165" }) }));
     };
 }
 
-function SplitCellsTool() {
+function ItalicTool() {
+    const query = inject(Query);
     const refreshService = inject(RefreshService);
-    const selection = inject(Selection);
+    const textbus = inject(Textbus);
     const [viewModel, update] = useProduce({
         highlight: false,
-        disabled: false,
     });
-    function split() {
-        const commonAncestorComponent = selection.commonAncestorComponent;
-        if (commonAncestorComponent instanceof TableComponent) {
-            commonAncestorComponent.splitCellsBySelection();
-        }
+    function toggle() {
+        toggleItalic(textbus);
     }
     const sub = refreshService.onRefresh.subscribe(() => {
-        const commonAncestorComponent = selection.commonAncestorComponent;
+        const state = query.queryFormat(italicFormatter);
         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;
+            draft.highlight = state.state === QueryStateType.Enabled;
         });
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
         const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsx("span", { class: "xnote-icon-split-cells" }) });
+        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly, onClick: toggle, children: jsx("span", { class: "xnote-icon-italic" }) });
     };
 }
 
-var scopedId$9 = "vf-cf8e1c";
-
-class FileUploader {
-}
+var scopedId$c = "vf-e74208";
 
-class ImageComponent extends Component {
-    static fromJSON(textbus, json) {
-        return new ImageComponent(textbus, Object.assign({}, json));
+let EditorService = class EditorService {
+    constructor() {
+        this.hideInlineToolbar = false;
+        this.canShowLeftToolbar = true;
+        this.onLeftToolbarCanVisibleChange = new Subject();
     }
-    getSlots() {
-        return [];
-    }
-}
-ImageComponent.type = ContentType.InlineComponent;
-ImageComponent.componentName = 'ImageComponent';
-function ImageView(props) {
-    const { name, state } = props.component;
-    const imageRef = createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        if (readonly() || output()) {
-            return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx("img", { alt: "", src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
-        }
-        return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx(DragResize, { source: imageRef, component: props.component, children: 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'
-        });
+    changeLeftToolbarVisible(b) {
+        this.canShowLeftToolbar = b;
+        this.onLeftToolbarCanVisibleChange.next();
     }
 };
+EditorService = __decorate([
+    Injectable({
+        provideIn: 'root'
+    })
+], EditorService);
 
-class VideoComponent extends Component {
-    static fromJSON(textbus, json) {
-        return new VideoComponent(textbus, Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
+function LinkTool(props) {
+    const selectionBridge = inject(SelectionBridge);
+    const selection = inject(Selection);
+    const commander = inject(Commander);
+    const editorService = inject(EditorService);
+    const container = inject(VIEW_CONTAINER);
+    const isShow = createSignal(false);
+    const value = createSignal('');
+    function setLink(ev) {
+        ev.preventDefault();
+        commander.applyFormat(linkFormatter, {
+            href: value(),
+            target: '_blanK'
+        });
+        isShow.set(false);
     }
+    let isClickFromSelf = false;
+    const sub = fromEvent(document, 'click').subscribe(() => {
+        if (isClickFromSelf) {
+            isClickFromSelf = false;
+            return;
+        }
+        editorService.hideInlineToolbar = false;
+        isShow.set(false);
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const commonState = useCommonState();
+    return withScopedCSS(scopedId$c, () => {
+        const containerRect = container.getBoundingClientRect();
+        const rect = isShow() ? selectionBridge.getRect({
+            slot: selection.focusSlot,
+            offset: selection.focusOffset
+        }) : {};
+        return (jsxs("span", { children: [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: jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
+                    jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxs("form", { onSubmit: setLink, onClick: () => {
+                                isClickFromSelf = true;
+                            }, class: "input-group", children: [jsx("input", { onChange: ev => {
+                                        value.set(ev.target.value);
+                                    }, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
+    });
 }
-VideoComponent.type = ContentType.InlineComponent;
-VideoComponent.componentName = 'VideoComponent';
-function VideoView(props) {
-    const { name, state } = props.component;
-    const videoRef = createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
+
+function RedoTool() {
+    const history = inject(History);
+    const instance = getCurrentInstance();
+    function redo() {
+        history.forward();
+    }
+    const sub = history.onChange.subscribe(() => {
+        instance.markAsDirtied();
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const commonState = useCommonState();
     return () => {
-        if (readonly() || output()) {
-            return (jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
-        }
-        return (jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsx(DragResize, { source: videoRef, component: props.component, children: jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }) }));
+        return jsx(Button, { disabled: !history.canForward || commonState().readonly, onClick: redo, children: jsx("span", { class: "xnote-icon-history-forward" }) });
     };
 }
-const videoComponentLoader = {
-    match(element) {
-        return element.tagName === 'VIDEO' || element.dataset.component === VideoComponent.componentName;
-    },
-    read(element, textbus) {
-        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
-        return new VideoComponent(textbus, {
-            src: video.src,
-            width: video.style.width || 'auto',
-            height: video.style.height || 'auto'
-        });
-    }
-};
 
-class KatexEditor extends Textbus {
-    constructor() {
-        const adapter = new ViewflyAdapter({
-            [SourceCodeComponent.componentName]: SourceCodeView
-        }, (host, root, injector) => {
-            const appInjector = new ReflectiveInjector(injector, [{
-                    provide: OutputInjectionToken,
-                    useValue: true
-                }]);
-            const app = createApp(root, {
-                context: appInjector
-            }).mount(host);
-            return () => {
-                app.destroy();
-            };
-        });
-        const browserModule = new BrowserModule({
-            adapter,
-            renderTo: () => {
-                return this.host;
-            }
-        });
-        super({
-            components: [
-                SourceCodeComponent
-            ],
-            imports: [browserModule]
-        });
-        this.onValueChange = new Subject();
+function StrikeThroughTool() {
+    const query = inject(Query);
+    const refreshService = inject(RefreshService);
+    const textbus = inject(Textbus);
+    const [viewModel, update] = useProduce({
+        highlight: false,
+    });
+    function toggle() {
+        toggleStrikeThrough(textbus);
     }
-    mount(host, code) {
-        this.host = host;
-        const model = new SourceCodeComponent(this, {
-            lineNumber: true,
-            autoBreak: true,
-            lang: 'latex',
-            theme: 'github',
-            slots: code.split('\n').map(i => {
-                const slot = new Slot([ContentType.Text]);
-                slot.insert(i);
-                return {
-                    slot,
-                    emphasize: false
-                };
-            })
-        });
-        this.onChange.subscribe(() => {
-            const str = model.state.slots.map(i => {
-                if (i.slot.isEmpty) {
-                    return '';
-                }
-                return i.slot.toString();
-            }).join('\n');
-            this.onValueChange.next(str);
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const state = query.queryFormat(strikeThroughFormatter);
+        update(draft => {
+            draft.highlight = state.state === QueryStateType.Enabled;
         });
-        return this.render(model);
-    }
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const commonState = useCommonState();
+    return () => {
+        const vm = viewModel();
+        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly, onClick: toggle, children: jsx("span", { class: "xnote-icon-strikethrough" }) });
+    };
 }
 
-class KatexComponent extends Component {
-    static fromJSON(textbus, state) {
-        return new KatexComponent(textbus, state);
-    }
-    constructor(textbus, state = {
-        text: '% \\f is defined as #1f(#2) using the macro\n' +
-            '\\f\\relax{x} = \\int_{-\\infty}^\\infty\n' +
-            '\\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n' +
-            '\\,d\\xi'
-    }) {
-        super(textbus, state);
+function SubscriptTool() {
+    const query = inject(Query);
+    const selection = inject(Selection);
+    const commander = inject(Commander);
+    const [state, updateState] = useProduce({
+        highlight: false
+    });
+    const sub = selection.onChange.subscribe(() => {
+        updateState(draft => {
+            draft.highlight = getState();
+        });
+    });
+    function getState() {
+        const s = query.queryFormat(subscriptFormatter);
+        return s.state === QueryStateType.Enabled;
     }
-    getSlots() {
-        return [];
+    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 (jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly, highlight: state().highlight, onClick: apply, children: jsx("span", { class: "xnote-icon-subscript" }) }));
+    };
 }
-KatexComponent.componentName = 'KatexComponent';
-KatexComponent.type = ContentType.InlineComponent;
-function domToVDom(el) {
-    const attrs = {};
-    el.getAttributeNames().forEach(key => {
-        attrs[key] = el.getAttribute(key);
+
+function SuperscriptTool() {
+    const query = inject(Query);
+    const selection = inject(Selection);
+    const commander = inject(Commander);
+    const [state, updateState] = useProduce({
+        highlight: false
     });
-    attrs.children = Array.from(el.childNodes).map(child => {
-        if (child.nodeType === Node.ELEMENT_NODE) {
-            return domToVDom(child);
-        }
-        return child.textContent || '';
+    const sub = selection.onChange.subscribe(() => {
+        updateState(draft => {
+            draft.highlight = getState();
+        });
     });
-    return jsx$1(el.tagName.toLowerCase(), attrs);
-}
-function KatexComponentView(props) {
-    function toDOM(value) {
-        let htmlString;
-        try {
-            htmlString = Katex.renderToString(value, {
-                displayMode: true,
-                leqno: false,
-                fleqn: false,
-                throwOnError: true,
-                errorColor: '#cc0000',
-                strict: 'warn',
-                output: 'html',
-                trust: false,
-                macros: { '\\f': '#1f(#2)' }
-            });
+    function getState() {
+        const s = query.queryFormat(superscriptFormatter);
+        return s.state === QueryStateType.Enabled;
+    }
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    function apply() {
+        const is = getState();
+        if (is) {
+            commander.unApplyFormat(superscriptFormatter);
         }
-        catch (e) {
-            htmlString = '<span style="color: red">公式错误</span>';
+        else {
+            commander.unApplyFormat(subscriptFormatter);
+            commander.applyFormat(superscriptFormatter, true);
         }
-        return new DOMParser().parseFromString(htmlString, 'text/html').body.children[0];
     }
-    const selection = inject(Textbus);
-    const editorRef = createDynamicRef(node => {
-        const editor = new KatexEditor();
-        editor.mount(node, props.component.state.text).then(() => {
-            editor.focus();
+    const commonState = useCommonState();
+    return () => {
+        return (jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly, highlight: state().highlight, onClick: apply, children: jsx("span", { class: "xnote-icon-superscript" }) }));
+    };
+}
+
+function UnderlineTool() {
+    const query = inject(Query);
+    const refreshService = inject(RefreshService);
+    const textbus = inject(Textbus);
+    const [viewModel, update] = useProduce({
+        highlight: false,
+    });
+    function toggle() {
+        toggleUnderline(textbus);
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const state = query.queryFormat(underlineFormatter);
+        update(draft => {
+            draft.highlight = state.state === QueryStateType.Enabled;
         });
-        selection.blur();
-        const subscription = editor.onValueChange.subscribe((value) => {
-            props.component.state.text = value;
-        }).add(fromEvent(node, 'mousedown').subscribe(ev => ev.stopPropagation()), fromEvent(document, 'mousedown').subscribe(() => {
-            var _a;
-            (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
-        }));
-        return () => {
-            subscription.unsubscribe();
-            editor.destroy();
-        };
     });
-    const dropdownRef = createRef();
-    const output = useOutput();
-    const readonly = useReadonly();
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const commonState = useCommonState();
     return () => {
-        const text = props.component.state.text;
-        return (jsx("span", { onClick: () => {
-                var _a;
-                (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(true);
-            }, ref: props.rootRef, "data-component": KatexComponent.componentName, "data-katex": encodeURIComponent(text), class: "xnote-katex", children: (output() || readonly()) ?
-                domToVDom(toDOM(text))
-                :
-                    jsx(Dropdown, { padding: '0', ref: dropdownRef, trigger: 'none', width: '600px', menu: jsx("div", { class: "xnote-katex-input", ref: editorRef }), children: domToVDom(toDOM(text)) }) }));
+        const vm = viewModel();
+        return jsx(Button, { highlight: vm.highlight, disabled: commonState().inSourceCode || commonState().readonly, onClick: toggle, children: jsx("span", { class: "xnote-icon-underline" }) });
     };
 }
-const katexComponentLoader = {
+
+function UndoTool() {
+    const history = inject(History);
+    const instance = getCurrentInstance();
+    function undo() {
+        history.back();
+    }
+    const sub = history.onChange.subscribe(() => {
+        instance.markAsDirtied();
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const commonState = useCommonState();
+    return () => {
+        return jsx(Button, { disabled: !history.canBack || commonState().readonly, onClick: undo, children: jsx("span", { class: "xnote-icon-history-back" }) });
+    };
+}
+
+const cellAlignAttr = new Attribute('cellAlign', {
+    render(node, formatValue) {
+        node.styles.set('verticalAlign', formatValue);
+    }
+});
+const cellAlignAttrLoader = {
     match(element) {
-        return element.dataset.component === KatexComponent.componentName;
+        return element instanceof HTMLTableCellElement && !!element.style.verticalAlign;
     },
-    read(element, textbus) {
-        const value = element.dataset.katex || '';
-        return new KatexComponent(textbus, {
-            text: decodeURIComponent(value)
-        });
+    read(element) {
+        return {
+            attribute: cellAlignAttr,
+            value: element.style.verticalAlign
+        };
     }
 };
 
-function InsertTool(props) {
-    const commander = inject(Commander);
-    const selection = inject(Selection);
-    const textbus = inject(Textbus);
-    const fileUploader = inject(FileUploader, null);
-    const dropdownContextService = inject(DropdownContextService);
-    function insert(type) {
-        var _a;
-        const component = (_a = props.slot) === null || _a === void 0 ? void 0 : _a.parent;
-        if (!component) {
-            return;
-        }
-        function insertComponent(comp) {
-            if (props.replace) {
-                commander.replaceComponent(component, comp);
-            }
-            else {
-                commander.insertAfter(comp, component);
+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;
             }
-            dropdownContextService.canHide = true;
-            dropdownContextService.hide(false);
+            slot = slot.parentSlot;
         }
-        switch (type) {
-            case 'h1':
-            case 'h2':
-            case 'h3':
-            case 'h4':
-            case 'h5':
-            case 'h6':
-            case 'paragraph':
-                {
-                    const slot = new Slot([
-                        ContentType.InlineComponent,
-                        ContentType.Text
-                    ]);
-                    if (/h[1-6]/.test(type)) {
-                        slot.setAttribute(headingAttr, type);
+        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 = createSignal('');
+    const selection = inject(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 p = new ParagraphComponent(textbus, {
-                        slot
-                    });
-                    insertComponent(p);
-                    selection.setPosition(slot, 0);
-                }
-                break;
-            case 'ol':
-            case 'ul':
-                {
-                    const slot = new Slot([
-                        ContentType.InlineComponent,
-                        ContentType.Text
-                    ]);
-                    const list = new ListComponent(textbus, {
-                        slot,
-                        reorder: true,
-                        type: type === 'ol' ? 'OrderedList' : 'UnorderedList'
-                    });
-                    insertComponent(list);
-                    selection.setPosition(slot, 0);
+                });
+            });
+        }
+        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;
                 }
-                break;
-            case 'sourceCode':
+            }
+        }
+    }
+    const refreshService = inject(RefreshService);
+    const query = inject(Query);
+    const highlight = 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 === QueryStateType.Enabled;
+        highlight.set(isHighlight);
+        currentValue.set(isHighlight ? result.value : 'middle');
+    });
+    onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    return () => {
+        return (jsx(Dropdown, { onCheck: check, menu: [
                 {
-                    const slot = new Slot([
-                        ContentType.Text
-                    ]);
-                    const comp = new SourceCodeComponent(textbus, {
-                        lang: '',
-                        lineNumber: true,
-                        slots: [{
-                                slot,
-                                emphasize: false
-                            }]
-                    });
-                    insertComponent(comp);
-                    selection.setPosition(slot, 0);
-                }
-                break;
-            case 'table':
+                    label: jsx(MenuItem, { checked: currentValue() === 'top', icon: jsx("span", { class: "xnote-icon-align-top" }), children: "\u9876\u90E8\u5BF9\u9F50" }),
+                    value: 'top'
+                },
                 {
-                    const table = new TableComponent(textbus);
-                    insertComponent(table);
-                    textbus.nextTick(() => {
-                        selection.selectFirstPosition(table, true, true);
-                    });
-                }
-                break;
-            case 'todolist':
+                    label: jsx(MenuItem, { checked: currentValue() === 'middle', icon: jsx("span", { class: "xnote-icon-align-middle" }), children: "\u5782\u76F4\u5C45\u4E2D" }),
+                    value: 'middle'
+                },
                 {
-                    const slot = new Slot([
-                        ContentType.Text,
-                        ContentType.InlineComponent
-                    ]);
-                    const comp = new TodolistComponent(textbus, {
-                        slot,
-                        checked: false
-                    });
-                    insertComponent(comp);
-                    selection.setPosition(slot, 0);
-                }
-                break;
-            case 'image':
-                if (fileUploader) {
-                    Promise.resolve().then(() => fileUploader.uploadFile('image')).then(url => {
-                        const img = new ImageComponent(textbus, {
-                            src: url
-                        });
-                        commander.insert(img);
-                    });
-                }
-                break;
-            case 'video':
-                if (fileUploader) {
-                    Promise.resolve().then(() => fileUploader.uploadFile('video')).then(url => {
-                        const img = new VideoComponent(textbus, {
-                            src: url
-                        });
-                        commander.insert(img);
-                    });
+                    label: jsx(MenuItem, { checked: currentValue() === 'bottom', icon: jsx("span", { class: "xnote-icon-align-bottom" }), children: "\u5E95\u90E8\u5BF9\u9F50" }),
+                    value: 'bottom'
                 }
-                break;
-            case 'highlightBox':
-                {
-                    const p = new ParagraphComponent(textbus);
-                    const comp = new HighlightBoxComponent(textbus);
-                    comp.state.slot.insert(p);
-                    insertComponent(comp);
-                    selection.setPosition(p.state.slot, 0);
+            ], children: jsx(Button, { arrow: true, highlight: highlight(), children: jsx("span", { class: 'xnote-icon-align-' + (currentValue() || 'middle') }) }) }));
+    };
+}
+
+const cellBackgroundAttr = new Attribute('cellBackground', {
+    render(node, formatValue) {
+        const rgba = parseCss(formatValue);
+        if (rgba) {
+            const hsl = 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 = 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 = inject(RefreshService);
+    const selection = inject(Selection);
+    const [viewModel, update] = 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;
                 }
-                break;
-            case 'katex':
-                {
-                    const p = new ParagraphComponent(textbus);
-                    const comp = new KatexComponent(textbus);
-                    p.state.slot.insert(comp);
-                    insertComponent(p);
-                    selection.selectComponent(comp);
+                parentSlot = parentSlot.parentSlot;
+            }
+        }
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        update(draft => {
+            draft.disabled = !isInTable(selection);
+        });
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return (jsx(Dropdown, { width: '177px', menu: jsx(ColorPicker, { onSelected: setColor }), trigger: 'hover', children: jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, children: jsx("span", { class: "xnote-icon-palette" }) }) }));
+    };
+}
+
+function MergeCellsTool() {
+    const refreshService = inject(RefreshService);
+    const selection = inject(Selection);
+    const [viewModel, update] = 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;
+        });
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: merge, children: jsx("span", { class: "xnote-icon-merge-cells" }) });
+    };
+}
+
+function SplitCellsTool() {
+    const refreshService = inject(RefreshService);
+    const selection = inject(Selection);
+    const [viewModel, update] = 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 withScopedCSS(scopedId$9, () => {
-        return jsxs(Fragment, { children: [props.hideTitle ? null : jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsx("span", { class: "xnote-icon-heading-h5" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsx("span", { class: "xnote-icon-heading-h6" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(MenuItem, { onClick: () => insert('table'), icon: jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsx(MenuItem, { onClick: () => insert('image'), icon: jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsx(MenuItem, { onClick: () => insert('video'), icon: jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsx(MenuItem, { onClick: () => insert('katex'), icon: jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" }), jsx(MenuItem, { onClick: () => insert('step'), icon: jsx("span", { class: "xnote-icon-step" }), children: "\u6B65\u9AA4\u6761" }), jsx(MenuItem, { onClick: () => insert('timeline'), icon: 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;
+        });
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsx("span", { class: "xnote-icon-split-cells" }) });
+    };
+}
+
+var scopedId$b = "vf-669084";
+
+function SplitLine() {
+    return withScopedCSS(scopedId$b, () => {
+        return jsx("div", { class: "split-line" });
     });
 }
 
-var scopedId$8 = "vf-b05292";
+var scopedId$a = "vf-b05292";
 
 const LeftToolbar = withAnnotation({
-    providers: [RefreshService]
+    providers: [RefreshService, ToolService]
 }, function LeftToolbar() {
     const adapter = inject(DomAdapter);
     const textbus = inject(Textbus);
@@ -5092,7 +5470,7 @@ const LeftToolbar = withAnnotation({
     function changeIgnoreMove(b) {
         isIgnoreMove = b;
     }
-    return withScopedCSS(scopedId$8, () => {
+    return withScopedCSS(scopedId$a, () => {
         var _a;
         const position = positionSignal();
         const slot = activeSlot();
@@ -5132,9 +5510,9 @@ const LeftToolbar = withAnnotation({
                         right: 0,
                         top: 0
                     }, menu: isEmptyBlock() ?
-                        jsx(InsertTool, { replace: !needInsert, slot: activeSlot() })
+                        jsx(InsertMenu, { replace: !needInsert, slot: activeSlot() })
                         :
-                            jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertTool, { hideTitle: true, slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
+                            jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertMenu, { hideTitle: true, slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
                             jsx("span", { children: jsx("i", { class: "xnote-icon-plus" }) })
                             :
                                 jsxs("span", { children: [activeNode, jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -5169,7 +5547,7 @@ class LeftToolbarPlugin {
     }
 }
 
-var scopedId$7 = "vf-3073ba";
+var scopedId$9 = "vf-3073ba";
 
 function LinkJump() {
     const selection = inject(Selection);
@@ -5223,25 +5601,26 @@ function LinkJump() {
             }
         });
     }
-    return createPortal(withScopedCSS(scopedId$7, () => {
+    return createPortal(withScopedCSS(scopedId$9, () => {
         return (jsxs("div", { ref: ref, class: "link-jump-plugin", style: { display: isShow() ? '' : 'none' }, children: [jsx("span", { onClick: cleanLink, children: "\u6E05\u9664" }), 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 = withAnnotation({
-    providers: [RefreshService]
-}, function Toolbar() {
+const InlineToolbar = withAnnotation({
+    providers: [RefreshService, ToolService]
+}, function Toolbar(props) {
     const selection = inject(Selection);
     const viewDocument = inject(VIEW_CONTAINER);
     const rootComponentRef = inject(RootComponentRef);
     const adapter = inject(DomAdapter);
     const bridge = inject(SelectionBridge);
+    const query = inject(Query);
     const textbus = inject(Textbus);
     const editorService = inject(EditorService);
     const refreshService = inject(RefreshService);
@@ -5364,28 +5743,29 @@ const Toolbar = withAnnotation({
         mousedownSubscription.unsubscribe();
         mouseupSubscription.unsubscribe();
     });
-    return withScopedCSS(scopedId$6, () => {
+    return withScopedCSS(scopedId$8, () => {
         const p = viewPosition();
-        return (jsxs("div", { class: "toolbar", ref: toolbarRef, style: {
+        return (jsxs("div", { class: ['toolbar', props.theme], ref: toolbarRef, style: {
                 left: p.left + 'px',
                 top: p.top + 'px',
                 pointerEvents: p.isHide ? 'none' : 'initial',
                 opacity: p.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: p.transitionDuration + 's'
-            }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxs(Fragment$1, { children: [jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table"), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(ToolbarItem, { children: jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(ColorTool, {}) })] }));
+            }, children: [jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(ColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
 
-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 : jsx(Toolbar, {});
+                return readonly() ? null : jsx(InlineToolbar, { theme: this.config.theme });
             };
         };
         this.app = createApp(jsx(App, {}), {
@@ -5402,6 +5782,133 @@ class ToolbarPlugin {
     }
 }
 
+var scopedId$7 = "vf-42c12d";
+
+const StaticToolbar = withAnnotation({
+    providers: [RefreshService, ToolService]
+}, function Toolbar(props) {
+    const selection = inject(Selection);
+    const textbus = inject(Textbus);
+    const query = inject(Query);
+    const refreshService = inject(RefreshService);
+    const instance = getCurrentInstance();
+    const subscription = merge(textbus.onChange, selection.onChange).pipe(debounceTime(20)).subscribe(() => {
+        refreshService.onRefresh.next();
+        instance.markAsDirtied();
+    });
+    onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    return withScopedCSS(scopedId$7, () => {
+        return (jsxs("div", { class: ['toolbar', props.theme], children: [jsx(ToolbarItem, { children: jsx(UndoTool, {}) }), jsx(ToolbarItem, { children: jsx(RedoTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(InsertTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, {}) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(ColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
+    });
+});
+
+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 = createApp(jsx(Context, { providers: [{
+                    provide: DropdownMenuContainer,
+                    useValue: container
+                }], children: 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 = withAnnotation({
+    providers: [RefreshService, ToolService]
+}, function Toolbar(props) {
+    const selection = inject(Selection);
+    const textbus = inject(Textbus);
+    const query = inject(Query);
+    const refreshService = inject(RefreshService);
+    const viewDocument = inject(VIEW_CONTAINER);
+    const instance = getCurrentInstance();
+    const subscription = merge(textbus.onChange, selection.onChange).pipe(debounceTime(20)).subscribe(() => {
+        refreshService.onRefresh.next();
+        instance.markAsDirtied();
+    });
+    onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    const [styles, updateStyles] = useProduce({
+        top: 0,
+        opacity: 1,
+    });
+    subscription.add(fromEvent(document, 'scroll').pipe(tap(() => {
+        updateStyles(draft => {
+            draft.opacity = 0;
+        });
+    }), debounceTime(100), tap(() => {
+        const rect = viewDocument.getBoundingClientRect();
+        if (rect.top < 10) {
+            updateStyles(draft => {
+                draft.top = Math.min(-rect.top + 10, rect.height - 100);
+            });
+        }
+        else {
+            updateStyles(draft => {
+                draft.top = 0;
+            });
+        }
+    }), delay(100)).subscribe(() => {
+        updateStyles(draft => {
+            draft.opacity = 1;
+        });
+    }));
+    return withScopedCSS(scopedId$6, () => {
+        const s = styles();
+        return (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: [jsx(ToolbarItem, { children: jsx(UndoTool, {}) }), jsx(ToolbarItem, { children: jsx(RedoTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(InsertTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, {}) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(ColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
+    });
+});
+
+class SuspensionToolbarPlugin {
+    constructor(options = {}) {
+        this.options = options;
+        this.app = null;
+        this.container = null;
+    }
+    setup(injector) {
+        const host = injector.get(VIEW_CONTAINER);
+        const container = document.createElement('div');
+        this.app = createApp(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;
@@ -5502,6 +6009,10 @@ class Matcher {
 class Organization {
 }
 function registerAtShortcut(textbus) {
+    const organization = textbus.get(Organization, null);
+    if (!organization) {
+        return;
+    }
     const keyboard = textbus.get(Keyboard);
     const selection = textbus.get(Selection);
     const commander = textbus.get(Commander);
@@ -5752,8 +6263,11 @@ class RootComponent extends Component {
             lastContent instanceof TodolistComponent) {
             return;
         }
+        const selection = this.textbus.get(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';
@@ -5768,14 +6282,22 @@ function RootView(props) {
             sub.unsubscribe();
         };
     });
-    onUpdated(() => {
-        props.component.afterCheck();
-    });
+    const containerRef = 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 (jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": props.component.name, children: jsx(SlotRender, { slot: content, tag: "div", class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
+        return (jsx("div", { class: "xnote-root", onClick: checkContent, style: !readonly() ? {
+                paddingBottom: '40px'
+            } : {}, dir: "auto", ref: [rootRef, containerRef, ref], "data-component": props.component.name, children: jsx(SlotRender, { slot: content, tag: "div", class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
     };
 }
 const rootComponentLoader = {
@@ -6825,7 +7347,9 @@ class Editor extends Textbus {
                 italicFormatLoader,
                 linkFormatLoader,
                 strikeThroughFormatLoader,
-                underlineFormatLoader
+                underlineFormatLoader,
+                subscriptFormatLoader,
+                superscriptFormatLoader
             ], attributeLoaders: [
                 cellBackgroundAttrLoader,
                 cellAlignAttrLoader,
@@ -6913,7 +7437,9 @@ class Editor extends Textbus {
                 italicFormatter,
                 linkFormatter,
                 strikeThroughFormatter,
-                underlineFormatter
+                underlineFormatter,
+                subscriptFormatter,
+                superscriptFormatter
             ], attributes: [
                 cellBackgroundAttr,
                 cellAlignAttr,
@@ -6922,7 +7448,7 @@ class Editor extends Textbus {
                 textIndentAttr
             ], plugins: [
                 new LeftToolbarPlugin(),
-                new ToolbarPlugin(),
+                new InlineToolbarPlugin()
             ], onAfterStartup(textbus) {
                 registerBoldShortcut(textbus);
                 registerCodeShortcut(textbus);
@@ -6976,4 +7502,4 @@ class Editor extends Textbus {
     }
 }
 
-export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CellAlignTool, CellBackgroundTool, CodeTool, ColorPicker, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, MergeCellsTool, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Picker, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, SplitCellsTool, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, XNoteMessageBug, atComponentLoader, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, cellAlignAttr, cellAlignAttrLoader, cellBackgroundAttr, cellBackgroundAttrLoader, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, katexComponentLoader, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
+export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CellAlignTool, CellBackgroundTool, CleanFormatsTool, CodeTool, ColorPicker, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuContainer, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InlineToolbar, InlineToolbarPlugin, InsertMenu, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, MergeCellsTool, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Picker, Popup, RedoTool, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, SplitCellsTool, SplitLine, StaticToolbar, StaticToolbarPlugin, StrikeThroughTool, SubscriptTool, SuperscriptTool, SuspensionToolbar, SuspensionToolbarPlugin, TableComponent, TableComponentView, TodolistComponent, TodolistView, ToolbarItem, UnderlineTool, UndoTool, VideoComponent, VideoView, XNoteMessageBug, atComponentLoader, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, cellAlignAttr, cellAlignAttrLoader, cellBackgroundAttr, cellBackgroundAttrLoader, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, katexComponentLoader, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, subscriptFormatLoader, subscriptFormatter, superscriptFormatLoader, superscriptFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };